298 views
CSSAdd prefixes
1.load { 2 position: relative; 3 width: 1.2em; 4 height: 1.2em; 5 border-radius: 50%; 6 float: left; 7} 8 9.progress { 10 top: 50%; 11 left: -80%; 12 position: absolute; 13 transform: translate(-50%, -50%); 14 content: ''; 15 width: 0px; 16 height: 0px; 17 border-radius: 50%; 18 background: rgb(255, 255, 255); 19 animation: loading_492 2s ease infinite; 20 animation-delay: 1s; 21} 22 23@keyframes loading_492 { 24 0% { 25 width: 0%; 26 height: 0%; 27 } 28 29 50% { 30 width: 99%; 31 height: 99%; 32 } 33 34 100% { 35 width: 0%; 36 height: 0%; 37 } 38} 39 40.progress:nth-child(2) { 41 left: 50%; 42 animation-delay: 1.3s; 43} 44 45.progress:nth-child(3) { 46 left: 180%; 47 animation-delay: 1.7s; 48}
HTML
1<div class="load"> 2 <div class="progress"></div> 3 <div class="progress"></div> 4 <div class="progress"></div> 5</div>