#e8e8e8
1.loader { 2 --clr: #3498db; 3 /* color of spining */ 4 width: 50px; 5 height: 50px; 6 position: relative; 7} 8 9.loader:before, .loader:after { 10 content: ""; 11 position: absolute; 12 top: -10px; 13 left: -10px; 14 width: 100%; 15 height: 100%; 16 border-radius: 100%; 17 border: 10px solid transparent; 18 border-top-color: var(--clr); 19} 20 21.loader:before { 22 z-index: 100; 23 animation: spin 1s infinite; 24} 25 26.loader:after { 27 border: 10px solid #ccc; 28} 29 30@keyframes spin { 31 0% { 32 -webkit-transform: rotate(0deg); 33 -ms-transform: rotate(0deg); 34 -o-transform: rotate(0deg); 35 transform: rotate(0deg); 36 } 37 38 100% { 39 -webkit-transform: rotate(360deg); 40 -ms-transform: rotate(360deg); 41 -o-transform: rotate(360deg); 42 transform: rotate(360deg); 43 } 44} 45
2K views
2K views
Comments
MIT License