Four kinds of loading loading effects:
<! DOCTYPE html>"en">"Utf-8"> <title> Four loading effects </title><style>/*First Kind*/. demo1 {width:4px; height:4px; Border-radius:2px; Background: #68b2ce; float: Left; Margin:03px; Animation:demo1 linear 1s infinite; -webkit-animation:demo1 linear 1s infinite;}. Demo1:nth-child (1) {Animation-delay:0s;}. Demo1:nth-child (2) {Animation-delay:0. 15s;}. Demo1:nth-child (3) {Animation-delay:0. 3s;}. Demo1:nth-child (4) {Animation-delay:0. 45s;}. Demo1:nth-child (5) {Animation-delay:0. 6s;} @keyframes demo1{0%, -%, -% {Transform:scale (1);} -% {Transform:scale (2.5);}} @-webkit-keyframes demo1{0%, -%, -% {Transform:scale (1);} -% {Transform:scale (2.5);}}/*The second Kind*/. demo2 {width:4px; height:6px; Background: #68b2ce; float: Left; Margin:03px; Animation:demo2 linear 1s infinite; -webkit-animation:demo2 linear 1s infinite;}. Demo2:nth-child (1) {Animation-delay:0s;}. Demo2:nth-child (2) {Animation-delay:0. 15s;}. Demo2:nth-child (3) {Animation-delay:0. 3s;}. Demo2:nth-child (4) {Animation-delay:0. 45s;}. Demo2:nth-child (5) {Animation-delay:0. 6s;} @keyframes demo2{0%, -%, -% {Transform:scale (1);} -% {Transform:scaley (3);}} @-webkit-keyframes demo2{0%, -%, -% {Transform:scale (1);} -% {Transform:scaley (3);}}/*Third Kind*/#loading3 {position:relative; width:50px; height:50px;}. Demo3 {width:4px; height:4px; Border-radius:2px; Background: #68b2ce; Position:absolute; Animation:demo3 Linear0. 8s Infinite; -webkit-animation:demo3 Linear0. 8s Infinite;}. Demo3:nth-child (1) {left:24px; top:2px; Animation-delay:0s;}. Demo3:nth-child (2) {left:40px; top:8px; Animation-delay:0. 1s;}. Demo3:nth-child (3) {left:47px; top:24px; Animation-delay:0. 1s;}. Demo3:nth-child (4) {left:40px; top:40px; Animation-delay:0. 2s;}. Demo3:nth-child (5) {left:24px; top:47px; Animation-delay:0. 4s;}. Demo3:nth-child (6) {left:8px; top:40px; Animation-delay:0. 5s;}. Demo3:nth-child (7) {left:2px; top:24px; Animation-delay:0. 6s;}. Demo3:nth-child (8) {left:8px; top:8px; Animation-delay:0. 7s;} @keyframes demo3{0%, +%, -% {Transform:scale (1);} -% {Transform:scale (3);}} @-webkit-keyframes demo3{0%, +%, -% {Transform:scale (1);} -% {Transform:scale (3);}}/*Fourth Type*/#loading5 {width:20px; height:100px; Border-bottom:1px solid #68b2ce;}. Demo5 {width:20px; height:20px; Border-radius:10px; Background: #68b2ce; Animation:demo5 Cubic-bezier (0.5,0.01,0.9,1)0. 6s Infinite Alternate; -webkit-animation:demo5 Cubic-bezier (0.5,0.01,0.9,1)0. 6s infinite Alternate;} @keyframes demo5{0%{transform:translatey (0px); -webkit-Transform:translatey (0px); } -%{Transform:translatey (80px); -webkit-Transform:translatey (80px); }}@-webkit-keyframes demo5{0%{transform:translatey (0px); -webkit-Transform:translatey (0px); } -%{Transform:translatey (80px); -webkit-Transform:translatey (80px); }}</style><body> <div id="loading1"> <divclass="Demo1"></div> <divclass="Demo1"></div> <divclass="Demo1"></div> <divclass="Demo1"></div> <divclass="Demo1"></div> </div> <div id="loading2"> <divclass="Demo2"></div> <divclass="Demo2"></div> <divclass="Demo2"></div> <divclass="Demo2"></div> <divclass="Demo2"></div> </div> <div id="Loading3"> <divclass="Demo3"></div> <divclass="Demo3"></div> <divclass="Demo3"></div> <divclass="Demo3"></div> <divclass="Demo3"></div> <divclass="Demo3"></div> <divclass="Demo3"></div> <divclass="Demo3"></div> </div> <div id="Loading5"> <divclass="Demo5"></div> </div></body>
CSS to achieve four kinds of loading animation effect