Loader by zombie223
#212121
1.lds-spinner { 2 height: 250px; 3 width: 250px; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 padding-right: 50px; 8 padding-bottom: 20px; 9} 10 11.lds-spinner div { 12 transform-origin: 30px 20px; 13} 14 15.lds-spinner div:after { 16 content: " "; 17 display: block; 18 position: absolute; 19 top: 2px; 20 left: 37px; 21 width: 6px; 22 height: 19px; 23 border-radius: 20%; 24 animation: color 1.2s ease-in-out infinite; 25} 26 27.lds-spinner div:nth-child(1) { 28 transform: rotate(0deg); 29 animation-delay: -1.1s; 30} 31 32.lds-spinner div:nth-child(2) { 33 transform: rotate(30deg); 34 animation-delay: -1s; 35} 36 37.lds-spinner div:nth-child(3) { 38 transform: rotate(60deg); 39 animation-delay: -0.9s; 40} 41 42.lds-spinner div:nth-child(4) { 43 transform: rotate(90deg); 44 animation-delay: -0.8s; 45} 46 47.lds-spinner div:nth-child(5) { 48 transform: rotate(120deg); 49 animation-delay: -0.7s; 50} 51 52.lds-spinner div:nth-child(6) { 53 transform: rotate(150deg); 54 animation-delay: -0.6s; 55} 56 57.lds-spinner div:nth-child(7) { 58 transform: rotate(180deg); 59 animation-delay: -0.5s; 60} 61 62.lds-spinner div:nth-child(8) { 63 transform: rotate(210deg); 64 animation-delay: -0.4s; 65} 66 67.lds-spinner div:nth-child(9) { 68 transform: rotate(240deg); 69 animation-delay: -0.3s; 70} 71 72.lds-spinner div:nth-child(10) { 73 transform: rotate(270deg); 74 animation-delay: -0.2s; 75} 76 77.lds-spinner div:nth-child(11) { 78 transform: rotate(300deg); 79 animation-delay: -0.1s; 80} 81 82.lds-spinner div:nth-child(12) { 83 transform: rotate(330deg); 84 animation-delay: 0s; 85} 86 87.lds-spinner div:nth-child(12)::after { 88 animation-delay: 0s; 89} 90 91.lds-spinner div:nth-child(1)::after { 92 animation-delay: -1.1s; 93} 94 95.lds-spinner div:nth-child(2)::after { 96 animation-delay: -1s; 97} 98 99.lds-spinner div:nth-child(3)::after { 100 animation-delay: -0.9s; 101} 102 103.lds-spinner div:nth-child(4)::after { 104 animation-delay: -0.8s; 105} 106 107.lds-spinner div:nth-child(5)::after { 108 animation-delay: -0.7s; 109} 110 111.lds-spinner div:nth-child(6)::after { 112 animation-delay: -0.6s; 113} 114 115.lds-spinner div:nth-child(7)::after { 116 animation-delay: -0.5s; 117} 118 119.lds-spinner div:nth-child(8)::after { 120 animation-delay: -0.4s; 121} 122 123.lds-spinner div:nth-child(9)::after { 124 animation-delay: -0.3s; 125} 126 127.lds-spinner div:nth-child(10)::after { 128 animation-delay: -0.2s; 129} 130 131.lds-spinner div:nth-child(11)::after { 132 animation-delay: -0.1s; 133} 134 135@keyframes color { 136 0% { 137 background-color: darkcyan; 138 } 139 140 100% { 141 background-color: white; 142 } 143}
489 views
489 views
MIT License