900 views
CSSAdd prefixes
1.loader { 2 position: relative; 3 transform: scale(2); 4 border-radius: 50%; 5 border: 1px solid; 6 width: 30px; 7 height: 30px; 8 color: white; 9} 10 11.loader::after { 12 position: absolute; 13 width: 0px; 14 height: 10px; 15 display: block; 16 border-left: 1px solid #fff; 17 content: ''; 18 left: 14px; 19 border-radius: 1px; 20 top: 4px; 21 animation-duration: 1s; 22} 23 24.loader::before { 25 position: absolute; 26 width: 0px; 27 height: 10px; 28 display: block; 29 border-left: 1px solid #fff; 30 content: ''; 31 left: 14px; 32 border-radius: 1px; 33 top: 4px; 34 animation-duration: 40s; 35} 36 37.loader::before,.loader::after { 38 transform-origin: bottom; 39 animation-name: dial; 40 animation-iteration-count: infinite; 41 animation-timing-function: linear; 42} 43 44@keyframes dial { 45 0% { 46 transform: rotate(0deg); 47 } 48 49 100% { 50 transform: rotate(360deg); 51 } 52}
HTML
1<div class="loader"></div>