557 views
CSSAdd prefixes
1.loader { 2 height: 5px; 3 width: 1px; 4 position: absolute; 5 animation: rotate0234 3.5s linear infinite; 6} 7 8.loader .dot { 9 top: 30px; 10 height: 7px; 11 width: 7px; 12 background: #268fe4; 13 border-radius: 50%; 14 position: relative; 15} 16 17.text { 18 position: absolute; 19 bottom: -85px; 20 font-size: 25px; 21 font-weight: 400; 22 color: #26aee4; 23} 24 25@keyframes rotate0234 { 26 30% { 27 transform: rotate(220deg); 28 } 29 30 40% { 31 transform: rotate(450deg); 32 opacity: 1; 33 } 34 35 75% { 36 transform: rotate(720deg); 37 opacity: 1; 38 } 39 40 76% { 41 opacity: 0; 42 } 43 44 100% { 45 opacity: 0; 46 transform: rotate(0deg); 47 } 48} 49 50.loader:nth-child(1) { 51 animation-delay: 0.15s; 52} 53 54.loader:nth-child(2) { 55 animation-delay: 0.3s; 56} 57 58.loader:nth-child(3) { 59 animation-delay: 0.45s; 60} 61 62.loader:nth-child(4) { 63 animation-delay: 0.6s; 64} 65 66.loader:nth-child(5) { 67 animation-delay: 0.75s; 68} 69 70.loader:nth-child(6) { 71 animation-delay: 0.9s; 72}
HTML
1<div class="loader"> 2 <div class="dot"></div> 3</div> 4<div class="loader"> 5 <div class="dot"></div> 6</div> 7<div class="loader"> 8 <div class="dot"></div> 9</div> 10<div class="loader"> 11 <div class="dot"></div> 12</div> 13<div class="loader"> 14 <div class="dot"></div> 15</div> 16<div class="loader"> 17 <div class="dot"></div> 18</div>