"HTML + CSS" custom loading animation [048]

Haihong Pro 2021-05-04 14:23:53
html css custom loading animation


Preface

Hello! buddy !
First of all, thank you very much for reading Haihong's article , If there are mistakes in the text , You are welcome to point out ~
ha-ha Introduce yourself
nickname : Sea boom
label : There's a program ape |C++ player | Student
brief introduction : because C Language and programming , Then I turned to computer science , Lucky to have won the National Award 、 Provincial awards, etc , It has been insured . Currently learning C++/Linux( It's really, really hard ~)
Learning experience : Solid foundation + Take more notes + Knock more code + Think more + Learn English well !
Everyday sharing : WeChat official account 【 Sea boom Pro】 Record life 、 Learning , Share some source code or learning materials , Welcome to your attention ~

Effect display

 Insert picture description here

Demo Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>

CSS

html,body{

margin: 0;
height: 100%;
}
body{

display: flex;
justify-content: center;
align-items: center;
background: #263238;
}
section {

width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* The red border is just a reminder */
border: 2px solid red;
}
span{

width : 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
position: relative;
color: white;
/* background-color: red; */
animation: loading 2s linear infinite;
}
@keyframes loading {

0% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
25% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 2px
}
50% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 2px, -78px 0 0 -2px
}
75% {
 box-shadow: 26px 0 0 2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
100% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
}

The principle,

step 1

Use span label , Set to

  • Width 、 The height is 24px
  • Background color : Red
     Insert picture description here

step 2

span Rounded labels

border-radius: 50%;

 Insert picture description here

step 3

by span Add animation

Use box-shadow Acting as a white ball

The key is Five frames

First frame

  • initial position
  • Separate use box-shadow Define four white balls (span Shadow )
  • It's on the left and right of the red ball
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px;

The renderings are as follows

 Insert picture description here

Second frame

Make the leftmost ball bigger , The rest remains the same

 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 2px;

The renderings are as follows
 Insert picture description here

Frame 3

Make the second ball on the left bigger , The rest remains the same

 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 2px, -78px 0 0 -2px;

The renderings are as follows
 Insert picture description here

The fourth frame

Make the third ball on the left bigger , The rest remains the same

 box-shadow: 26px 0 0 2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px

The renderings are as follows
 Insert picture description here

Frame five

Make the fourth ball on the left bigger , The rest remains the same

 box-shadow: 26px 0 0 -2px, 78px 0 0 2px,
-26px 0 0 -2px, -78px 0 0 -2px;

The renderings are as follows

 Insert picture description here
Finally, comment it out span The background color of

To sum up

The code is

 animation: loading 2s linear infinite;
@keyframes loading {

0% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
25% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 2px
}
50% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 -2px,
-26px 0 0 2px, -78px 0 0 -2px
}
75% {
 box-shadow: 26px 0 0 2px, 78px 0 0 -2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
100% {
 box-shadow: 26px 0 0 -2px, 78px 0 0 2px,
-26px 0 0 -2px, -78px 0 0 -2px
}
}

The renderings are as follows

 Insert picture description here

Conclusion

Source of learning :

https://codepen.io/bhadupranjal/pen/vYLZYqQ

The article is only for study notes , Record from 0 To 1 A process of . I hope it will be of some help to you , If you have any mistakes, you are welcome to correct them ~

I'm Haihong ଘ(੭ˊᵕˋ)੭, If you think it's ok , Please like it

Writing is not easy to ,「 give the thumbs-up 」+「 Collection 」+「 forward 」

Thank you for your support ️

 Insert picture description here

版权声明
本文为[Haihong Pro]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504142243471S.html

  1. Two way linked list: I'm no longer one-way driving
  2. Vue event and form processing
  3. Reactive TraderCloud实时外汇开源交易平台
  4. Reactive tradercloud real time foreign exchange open source trading platform
  5. Node.js REST API的10个最佳实践
  6. Ten best practices of node.js rest API
  7. Fiddler advanced usage
  8. Process from Vue template to render
  9. Promise up (asynchronous or synchronous)
  10. Principle and implementation of promise
  11. Vs code plug in sharing - run code
  12. Vue practical notes (1) introduction of Ant Design
  13. Vue actual combat notes (2) introduction of element plus
  14. Introduction to webpack
  15. Webpack construction process
  16. Vue notes
  17. The experience and lessons of moving from ruby megalith architecture to go microservice
  18. Using leancloud to add artitalk module to hexo blog
  19. Implementation of chrome request filtering extension
  20. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  21. Gallop workflow engine design series 01 process element design
  22. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  23. Vue Mobile Music App learning [16]: player lyrics display development
  24. jquery cookie
  25. jquery cookie
  26. 体面编码之JavaScript
  27. JavaScript for decent coding
  28. React17 系统精讲 结合TS打造旅游电商平台
  29. React17 system combined with TS to build tourism e-commerce platform
  30. 2021-05-04 hot news
  31. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  32. gRPC-Web:替代REST的gRPC的Javascript库包
  33. The relationship between httpsession object and cooike and the construction of cookie object
  34. Grpc Web: a JavaScript library package to replace rest grpc
  35. Building reactive rest API with Java - kalpa Senanayake
  36. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  37. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  38. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  39. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  40. Vue.js比jQuery更容易学习
  41. Node.js的Reactor模式 与异步编程
  42. Vue. JS is easier to learn than jQuery
  43. Reactor mode of node.js and asynchronous programming
  44. 详解JavaScript中的正则表达式
  45. Explain regular expressions in JavaScript
  46. 详解JavaScript中的正则表达式
  47. Explain regular expressions in JavaScript
  48. JS: closure
  49. Write your own promise in promises / A + specification
  50. Analysis of the core mechanism of webpack from loader, plugin to egg
  51. On the import and export of webpack
  52. Interpretation of lodash source code (2)
  53. Hexo series (5) writing articles
  54. 有人用过JMeter或用HttpUnit写过测试吗????
  55. Has anyone ever used JMeter or written tests in httpUnit????
  56. JavaScript异步编程4——Promise错误处理
  57. Leetcode 1846. Reduce and rearrange the largest element of an array
  58. JavaScript asynchronous programming 4 -- promise error handling
  59. SQLite是一种经典的无服务器Serverless
  60. 通过Spring Boot Webflux实现Reactor Kafka