CSS3 Loading (load) animation effect

Spinkit is a set of web animation effects, including 8 kinds of cool load animations based on CSS3 implementations. Create smooth, easily customizable animations with the powerful features of CSS3 Animation. Spinkit's goal is not to provide a solution that is compatible with every browser, but to provide a better technology implementation and a better use experience for modern browsers. (For best results, browse in modern browsers such as Chrome, Firefox, and Safari)

Loading Animation effect A

HTML Code:

<div class= "Spinner" >
  <div class= "rect1" ></div>
  <div class= "Rect2" ></div>
  <div class= "rect3" ></div>
  <div class= "Rect4" ></div>
  <div class= "Rect5" ></div>
</div>

CSS Code:

 spinner {margin:100px auto;
  width:50px;
  height:60px;
  Text-align:center;
font-size:10px;
  }. Spinner > div {background-color: #67CF22;
  height:100%;
  width:6px;
  
  Display:inline-block;
  -webkit-animation:stretchdelay 1.2s Infinite ease-in-out;
Animation:stretchdelay 1.2s Infinite ease-in-out;
  }. Spinner. rect2 {-webkit-animation-delay: -1.1s;
Animation-delay: -1.1s;
  }. Spinner. rect3 {-webkit-animation-delay: -1.0s;
Animation-delay: -1.0s;
  }. Spinner. Rect4 {-webkit-animation-delay: -0.9s;
Animation-delay: -0.9s;
  }. Spinner. rect5 {-webkit-animation-delay: -0.8s;
Animation-delay: -0.8s; } @-webkit-keyframes stretchdelay {0%, 40%, 100% {-webkit-transform:scaley (0.4)} 20% {-webkit-transform:scale
    Y (1.0)}} @keyframes stretchdelay {0%, 40%, 100% {Transform:scaley (0.4);
  -webkit-transform:scaley (0.4);
    } 20% {Transform:scaley (1.0); -webkit-transform:scalEY (1.0); }
}

loading animation effect two

HTML Code:

<div class= "Spinner" ></div>

CSS Code:

Loading Animation effect Three

   

HTML Code:

<div class= "Spinner" >
  <div class= "Double-bounce1" ></div>
  <div class= "Double-bounce2" ></div>
</div>

CSS Code:

. spinner {
  width:60px;
  height:60px;

  position:relative;
  margin:100px Auto;

Double-bounce1,. double-bounce2 {
  width:100%;
  height:100%;
  border-radius:50%;
  Background-color: #67CF22;
  opacity:0.6;
  Position:absolute;
  top:0;
  left:0;
  
  -webkit-animation:bounce 2.0s Infinite ease-in-out;
  Animation:bounce 2.0s infinite ease-in-out;

Double-bounce2 {
  -webkit-animation-delay: -1.0s;
  Animation-delay: -1.0s;
}

@-webkit-keyframes Bounce {
  0%, 100% {-webkit-transform:scale (0.0)}
  50% {-webkit-transform:scale (1.0)}
  }

@keyframes bounce {
  0%, 100% { 
    transform:scale (0.0);
    -webkit-transform:scale (0.0);
  } 50% { 
    Transform:scale (1.0);
    -webkit-transform:scale (1.0);
  }

Loading Animation effect Four

HTML Code:

<div class= "Spinner" >
  <div class= "cube1" ></div>
  <div class= "Cube2" ></div>
</div>

CSS Code:

 spinner {margin:100px auto;
  width:32px;
  height:32px;
position:relative;
  }. Cube1, cube2 {background-color: #67CF22;
  width:30px;
  height:30px;
  Position:absolute;
  top:0;
  
  left:0;
  -webkit-animation:cubemove 1.8s Infinite ease-in-out;
Animation:cubemove 1.8s Infinite ease-in-out;
  }. cube2 {-webkit-animation-delay: -0.9s;
Animation-delay: -0.9s; } @-webkit-keyframes cubemove {25% {-webkit-transform:translatex (42px) rotate ( -90deg) scale (0.5)} 50% {-webkit-t  Ransform:translatex (42px) translatey (42px) rotate ( -180deg)} 75% {-webkit-transform:translatex (0px) Translatey (42px) Rotate ( -270deg) scale (0.5)} 100% {-webkit-transform:rotate ( -360deg)}} @keyframes Cubemove {25% {transfor
    M:translatex (42px) rotate ( -90deg) scale (0.5);
  -webkit-transform:translatex (42px) rotate ( -90deg) scale (0.5);
  } 50% {Transform:translatex (42px) translatey (42px) rotate ( -179deg);  -webkit-transform:translatex (42px) translatey (42px) rotate ( -179deg);
    } 50.1% {Transform:translatex (42px) translatey (42px) rotate ( -180deg);
  -webkit-transform:translatex (42px) translatey (42px) rotate ( -180deg);
    } 75% {Transform:translatex (0px) translatey (42px) rotate ( -270deg) scale (0.5);
  -webkit-transform:translatex (0px) translatey (42px) rotate ( -270deg) scale (0.5);
    } 100% {transform:rotate ( -360deg);
  -webkit-transform:rotate ( -360DEG); }
}

loading animation effect five

HTML Code:

<div class= "Spinner" >
  <div class= "dot1" ></div>
  <div class= "Dot2" ></div>
</div>

CSS Code:

 spinner {margin:100px auto;
  width:90px;
  height:90px;
  position:relative;
  
  Text-align:center;
  -webkit-animation:rotate 2.0s Infinite Linear;
Animation:rotate 2.0s Infinite Linear;
  }. Dot1, Dot2 {width:60%;
  height:60%;
  Display:inline-block;
  Position:absolute;
  top:0;
  Background-color: #67CF22;
  
  border-radius:100%;
  -webkit-animation:bounce 2.0s Infinite ease-in-out;
Animation:bounce 2.0s Infinite ease-in-out;
  }. dot2 {top:auto;
  bottom:0px;
  -webkit-animation-delay: -1.0s;
Animation-delay: -1.0s; } @-webkit-keyframes Rotate {100% {-webkit-transform:rotate (360deg)}} @keyframes rotate {100% {transform:rotate (36 0DEG); -webkit-transform:rotate (360DEG)}} @-webkit-keyframes Bounce {0%, 100% {-webkit-transform:scale (0.0)} 50% {-we
    Bkit-transform:scale (1.0)}} @keyframes Bounce {0%, 100% {transform:scale (0.0);
  -webkit-transform:scale (0.0); } 50% {Transform:scale (1.0);
  -webkit-transform:scale (1.0); }
}

loading animation effect six

HTML Code:

<div class= "Spinner" >
  <div class= "Bounce1" ></div>
  <div class= "Bounce2" ></div >
  <div class= "Bounce3" ></div>
</div>

CSS Code:

 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 the 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); }
}

Loading Animation effect Seven

 

HTML Code:

<div class= "Spinner" ></div>

CSS Code:

. spinner {
  width:40px;
  height:40px;
  margin:100px Auto;
  Background-color: #333;

  border-radius:100%;  
  -webkit-animation:scaleout 1.0s Infinite ease-in-out;
  Animation:scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes Scaleout {
  0% {-webkit-transform:scale (0.0)}
  100% {
    -webkit-transform:scale (1.0) ;
    opacity:0
  }
}

@keyframes Scaleout {
  0% { 
    transform:scale (0.0);
    -webkit-transform:scale (0.0);
  } 100% {
    Transform:scale (1.0);
    -webkit-transform:scale (1.0);
    opacity:0
  }
}

Loading Animation effect Eight

HTML Code:

<div class= "Spinner" >
  <div class= "Spinner-container container1" >
    <div class= "Circle1" > </div>
    <div class= "Circle2" ></div>
    <div class= "Circle3" ></div>
    <div class= "Circle4" ></div>
  </div>
  <div class= "Spinner-container container2" >
    < Div class= "Circle1" ></div>
    <div class= "Circle2" ></div>
    <div class= "Circle3" > </div>
    <div class= "circle4" ></div>
  </div>
  <div class= " Spinner-container Container3 ">
    <div class=" Circle1 "></div>
    <div class=" Circle2 "> </div>
    <div class= "Circle3" ></div>
    <div class= "circle4" ></div>
  < /div>
</div>

CSS Code:

. spinner {margin:100px auto;
  width:20px;
  height:20px;
position:relative;
  }. container1 > Div,. container2 > Div,. container3 > div {width:6px;
  height:6px;

  Background-color: #333;
  border-radius:100%;
  Position:absolute;
  -webkit-animation:bouncedelay 1.2s Infinite ease-in-out;
  Animation:bouncedelay 1.2s Infinite ease-in-out;
  -webkit-animation-fill-mode:both;
Animation-fill-mode:both;
  }. Spinner. spinner-container {position:absolute;
  width:100%;
height:100%;
  }. Container2 {-webkit-transform:rotatez (45deg);
Transform:rotatez (45DEG);
  }. Container3 {-webkit-transform:rotatez (90deg);
Transform:rotatez (90DEG); }. circle1 {top:0; left:0; circle2 {top:0; right:0;}. circle3 {right:0; bottom:0; circle4 om:0;
  }. Container2. circle1 {-webkit-animation-delay: -1.1s;
Animation-delay: -1.1s;
  }. Container3. circle1 {-webkit-animation-delay: -1.0s;
Animation-delay: -1.0s; }. ContainEr1. circle2 {-webkit-animation-delay: -0.9s;
Animation-delay: -0.9s;
  }. Container2. circle2 {-webkit-animation-delay: -0.8s;
Animation-delay: -0.8s;
  }. Container3. circle2 {-webkit-animation-delay: -0.7s;
Animation-delay: -0.7s;
  }. Container1. circle3 {-webkit-animation-delay: -0.6s;
Animation-delay: -0.6s;
  }. Container2. circle3 {-webkit-animation-delay: -0.5s;
Animation-delay: -0.5s;
  }. Container3. circle3 {-webkit-animation-delay: -0.4s;
Animation-delay: -0.4s;
  }. Container1. circle4 {-webkit-animation-delay: -0.3s;
Animation-delay: -0.3s;
  }. Container2. circle4 {-webkit-animation-delay: -0.2s;
Animation-delay: -0.2s;
  }. Container3. circle4 {-webkit-animation-delay: -0.1s;
Animation-delay: -0.1s; } @-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); }
}