Loader by Shoh2008
#212121
1.lds-roller { 2 display: inline-block; 3 position: relative; 4 width: 80px; 5 height: 80px; 6} 7 8.lds-roller div { 9 animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 10 transform-origin: 40px 40px; 11} 12 13.lds-roller div:after { 14 content: " "; 15 display: block; 16 position: absolute; 17 width: 7px; 18 height: 7px; 19 border-radius: 50%; 20 background: yellow; 21 margin: -4px 0 0 -4px; 22} 23 24.lds-roller div:nth-child(1) { 25 animation-delay: -0.036s; 26} 27 28.lds-roller div:nth-child(1):after { 29 top: 63px; 30 left: 63px; 31} 32 33.lds-roller div:nth-child(2) { 34 animation-delay: -0.072s; 35} 36 37.lds-roller div:nth-child(2):after { 38 top: 68px; 39 left: 56px; 40} 41 42.lds-roller div:nth-child(3) { 43 animation-delay: -0.108s; 44} 45 46.lds-roller div:nth-child(3):after { 47 top: 71px; 48 left: 48px; 49} 50 51.lds-roller div:nth-child(4) { 52 animation-delay: -0.144s; 53} 54 55.lds-roller div:nth-child(4):after { 56 top: 72px; 57 left: 40px; 58} 59 60.lds-roller div:nth-child(5) { 61 animation-delay: -0.18s; 62} 63 64.lds-roller div:nth-child(5):after { 65 top: 71px; 66 left: 32px; 67} 68 69.lds-roller div:nth-child(6) { 70 animation-delay: -0.216s; 71} 72 73.lds-roller div:nth-child(6):after { 74 top: 68px; 75 left: 24px; 76} 77 78.lds-roller div:nth-child(7) { 79 animation-delay: -0.252s; 80} 81 82.lds-roller div:nth-child(7):after { 83 top: 63px; 84 left: 17px; 85} 86 87.lds-roller div:nth-child(8) { 88 animation-delay: -0.288s; 89} 90 91.lds-roller div:nth-child(8):after { 92 top: 56px; 93 left: 12px; 94} 95 96@keyframes lds-roller { 97 0% { 98 transform: rotate(0deg); 99 } 100 101 100% { 102 transform: rotate(360deg); 103 } 104} 105
851 views
851 views
MIT License