"HTML + CSS" -- custom loading animation [008]

Haihong Pro 2021-04-08 02:12:58
html css custom loading animation


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


<!DOCTYPE html>
<html lang="en">
<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">



margin: 0;
height: 100%;

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;

width : 96px;
height: 96px;
border: 10px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: rotation 1s linear infinite;

position: relative;
content: '';
display: inline-block;
width: 72px;
height: 72px;
border-radius: 50%;
border: 10px solid transparent;
border-bottom-color: #FF3D00;
border-top-color: #FF3D00;
@keyframes rotation {

0% {
 transform: rotate(0deg) }
100% {
 transform: rotate(360deg)

Explanation of principle

The core of animation is span and span::after,section Just as a prompt box .

step 1

take span The element is set to

  • One 96️96px The square of
  • Border is 10px, white ,solid
 width : 96px;
height: 96px;
border: 10px solid #fff;

The renderings are as follows
 Insert picture description here

step 2

span::after The pseudo element is set to :

  • be located span middle
  • Side length 72️72px The square of

notes : The red part is span::after, It's set to red for observation
 Insert picture description here

step 3

span::after Set up

  • Under the frame :10px Red solid
  • On the border :10px Red solid
  • Left / Right margin :10px transparent solid
 border: 10px solid transparent;
border-bottom-color: #FF3D00;
border-top-color: #FF3D00;

 Insert picture description here

step 4

span and span::after

  • border-radius All set to 50%
border-radius: 50%;

The renderings are as follows

 Insert picture description here

step 5

by span Add animation

animation: rotation 1s linear infinite;
/* Animation to achieve */
@keyframes rotation {

0% {
 transform: rotate(0deg) }
100% {
 transform: rotate(360deg)

The renderings are as follows

 Insert picture description here


Source of learning :


The main thing is to learn how to think , Figure out how the effect works , And then type the code again according to your understanding , Be sure to knock !

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]所创,转载请带上原文链接,感谢

  1. The difference between pseudo class and pseudo class elements
  2. [CSS effect] simple drop-down menu
  3. [Vue] value transfer by parent-child component
  4. 【css】设置table表格边框样式
  5. 【css】修改input,textarea中的placeholder样式
  6. vue-router的两种模式(hash和history)及区别
  7. CSS3的滤镜filter属性
  8. [CSS] set table border style
  9. [CSS] modify the placeholder style in input and textarea
  10. Two modes of Vue router (hash and History) and their differences
  11. Filter property of CSS3
  12. 全局安装gulp 报错问题解决
  13. Solution of error report in global installation of gulp
  14. 18个好用的自定义react hook
  15. 你应该知道的常用服务器HTTP状态码?
  16. 18 user defined react hooks
  17. What HTTP status codes should you know about common servers?
  18. 手把手教你打造属于自己团队的前端小报系统
  19. Hand in hand to teach you to build your own front-end tabloid system
  20. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?
  21. vue cli4.0 快速搭建项目详解
  22. Vue cli4.0 quick build project
  23. vue-cli脚手架安装
  24. Installation of Vue cli scaffold
  25. [JS knowledge] method of getting elements from DOM
  26. 【jQuery效果】文字滚动
  27. [jQuery effect] text scrolling
  28. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  29. React native introduces third party Android SDK
  30. Using html2canvas to generate shared images, CDN images do not show the problem
  31. Using hooks to write react components
  32. Explain the module hot replacement function of webpack in detail
  33. An incomplete guide to writing a simple native wechat applet
  34. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  35. Jsonp method to solve cross domain problems
  36. Canvas animation demo (from zero to one)
  37. El dialog of elementui component encapsulation
  38. Transition group of Vue source code
  39. When encountering bracket validity, next larger element, specific minimum value, try stack
  40. Vue3 virtual DOM
  41. Scheme and implementation of front end page watermarking
  42. Why is 0.1 + 0.2 not equal to 0.3?
  43. JS arrow function this points to related practice
  44. CSS text decoration & text emphasis
  45. 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
  46. 大前端
  47. The first compulsory CSS architecture system in 2021
  48. Big front end
  49. 你喜欢才是最好的,前端工程师常用的8个工具
  50. What you like is the best. There are 8 common tools used by front-end engineers
  51. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  52. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  53. CSS高级技巧总结
  54. CSS advanced skills summary
  55. HTML5教程 - HTML5 事件
  56. HTML5 tutorial - HTML5 events
  57. Vue和微信小程序的区别
  58. The difference between Vue and wechat applet
  59. HTML5和CSS3提高
  60. Improvement of HTML5 and CSS3