How to use CSS3 to create a page circle loading animation (with code)

When opening a page, you often encounter a situation where the page is loading. As a front-end engineer, do you know how to use CSS3 to achieve page loading animation effects? This article will share with you the code for a cool circle loading animation effect. It has certain reference value and interested friends can take a look.

Making page loading animations requires the use of many attributes in CSS3, such as: animation attributes, positioning, border-radius fillets, transform attributes, etc. If you are unclear, you can check out my previous Articles have been introduced before, or visit CSS3 video tutorial. These are the basics and must be mastered.

Example: Create a circle loading animation effect. When loading, the size of the circle changes from small to large, and the color changes from light to dark. The specific code is as follows:

HTML part:

<div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>     
      </div>
  </div>

CSS part:

.loader{
       width: 300px;
       border: 1px solid #ccc;
       height: 200px;
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
   }   
   @-webkit-keyframes loading{
       50%{
           transform: scale(0.4);
           opacity: 0.3;
       }
       100%{
           transform: scale(1);
           opacity: 1;
       }
   }
   .loading{
       position: relative;
   }
   .loading i{
       display: block;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       position: absolute;
       background: #333;
   }
   .loading i:nth-child(1){
       top: 25px;
       left: 0;
       -webkit-animation: loading 1s ease 0s infinite;
   }
   .loading i:nth-child(2){
       top: 17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.12s infinite;
   }
   .loading i:nth-child(3){
       top: 0;
       left: 25px;
       -webkit-animation: loading 1s ease 0.24s infinite;
   }
   .loading i:nth-child(4){
       top: -17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.36s infinite;
   }
   .loading i:nth-child(5){
       top: -25px;
       left: 0;
       -webkit-animation: loading 1s ease 0.48s infinite;
   }
   .loading i:nth-child(6){
       top: -17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.6s infinite;
   }
   .loading i:nth-child(7){
       top: 0;
       left: -25px;
       -webkit-animation: loading 1s ease 0.72s infinite;
   }
   .loading i:nth-child(8){
       top: 17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.84s infinite;   
   }

Rendering:

The above shared CSS3 code to achieve page loading animation effect, used in the project There are many, so you can use them directly. I hope you can try them yourself and see if you can create other effects. I hope this article will be helpful to you! For more related tutorials, please visit CSS video tutorial

The above is the detailed content of How to use CSS3 to create a page circle loading animation (with code). For more information, please follow other related articles on the PHP Chinese website!