5K views
CSSAdd prefixes
1.spinner { 2 width: 3em; 3 height: 3em; 4 position: absolute; 5 cursor: not-allowed; 6 border-radius: 50%; 7 border: 2px solid #444; 8 box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700; 9 animation: rot55 0.7s linear infinite; 10} 11 12.spinnerin { 13 border: 2px solid #444; 14 width: 1.5em; 15 height: 1.5em; 16 border-radius: 50%; 17 position: absolute; 18 top: 50%; 19 left: 50%; 20 transform: translate(-50%, -50%); 21} 22 23@keyframes rot55 { 24 to { 25 transform: rotate(360deg); 26 } 27} 28
HTML
1<div class="spinner"> 2 <div class="spinnerin"></div> 3</div>