Home  >  Article  >  Web Front-end  >  HTML+CSS realizes page loading (loading) animation effect

HTML+CSS realizes page loading (loading) animation effect

yulia
yuliaOriginal
2018-10-16 17:15:089849browse

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:

HTML+CSS realizes page loading (loading) animation effect


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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn