1.html part
<div class= "Spinner" > <div class= "rect1" ></div> <div class= "Rect2" ></div> <div class= "rect3" ></div> <div class= "Rect4" ></div> <div class= "Rect5" ></div></div>
2.css part
. 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:sca LeY (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); }}
1.html part
<div class= "Spinner" ></div>
2.css part
. spinner { width:60px; height:60px; Background-color: #67CF22; margin:100px Auto; -webkit-animation:rotateplane 1.2s Infinite ease-in-out; Animation:rotateplane 1.2s infinite Ease-in-out;} @-webkit-keyframes Rotateplane { 0% {-webkit-transform:perspective (120px)} 50% {-webkit-transform: Perspective (120px) Rotatey (180deg)} 100% {-webkit-transform:perspective (120px) Rotatey (180deg) Rotatex ( 180DEG)}} @keyframes Rotateplane { 0% { transform:perspective (120px) Rotatex (0deg) Rotatey (0deg); -webkit-transform:perspective (120px) Rotatex (0deg) Rotatey (0deg) } 50% { transform:perspective (120px) Rotatex ( -180.1deg) Rotatey (0deg); -webkit-transform:perspective (120px) Rotatex ( -180.1deg) Rotatey (0deg) } 100% { transform:perspective ( 120px) Rotatex ( -180deg) Rotatey ( -179.9deg); -webkit-transform:perspective (120px) Rotatex ( -180deg) Rotatey ( -179.9deg);} }
1.html part
<div class= "Spinner" > <div class= "Double-bounce1" ></div> <div class= "Double-bounce2" ></div></div>
2.css part
. 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)}} @k Eyframes Bounce { 0, 100% { transform:scale (0.0); -webkit-transform:scale (0.0); } 50% { Transform:scale (1.0); -webkit-transform:scale (1.0); }}
1.html part
<div class= "Spinner" > <div class= "Bounce1" ></div> <div class= "Bounce2" ></div > <div class= "Bounce3" ></div></div>
2.css 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); }}
1.html part
<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>
2.css part
. 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 {left:0; bottom: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); }}