HTML+CSS realizes page loading (loading) animation effect

Have you ever encountered a situation where the page is loading when browsing the page? As a front-end developer, do you know how to use CSS3 and HTML to create a page loading animation effect? This article will share with you a super simple and practical CSS3 circle loading animation effect code. It has certain reference value and interested friends can take a look.

To implement loading loading animation, you need to use many attributes and HTML tags in CSS3, such as: animation animation, display, border-radius rounded corners, transform attribute, etc. If you are not sure, you can Check out my previous articles, which have been introduced before, or visit CSS3 Video Tutorial.

Example demonstration: Use three circles to create a page loading animation effect. The circles change from hiding to appearing and then to hiding. The specific code is as follows:

HTML part:

<div class="spinner">
     <div class="bounce1"></div>
    <div class="bounce2"></div>
     <div class="bounce3"></div>
</div>

CSS3 part:

.spinner {
     margin: 100px auto 0;
     width: 150px;
     text-align: center;
   }
    
   .spinner > div {
     width: 30px;
     height: 30px;
     background-color: #67CF22;
    
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
     animation: bouncedelay 1.4s infinite ease-in-out;
     /* Prevent first frame from flickering when animation starts */
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
    
   .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
   }
    
   .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
    
   @-webkit-keyframes bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0.0) }
     40% { -webkit-transform: scale(1.0) }
   }
    
   @keyframes bouncedelay {
     0%, 80%, 100% {
       transform: scale(0.0);
       -webkit-transform: scale(0.0);
     } 40% {
       transform: scale(1.0);
       -webkit-transform: scale(1.0);
     }
   }

The effect is as shown in the figure:

The above introduces the method of CSS3 to achieve page loading animation effect. In the project It is used a lot. You can use it directly, or you can modify it to the style you like. I hope this article will be helpful to you!

【Recommended related tutorials】

1. HTML Video Tutorial
2. CSS3 Online Manual
3. bootstrap tutorial

The above is the detailed content of HTML+CSS realizes page loading (loading) animation effect. For more information, please follow other related articles on the PHP Chinese website!