#212121
1.loader { 2 position: relative; 3 width: 160px; 4 height: 160px; 5 border: 4px solid #282828; 6 overflow: hidden; 7 border-radius: 50%; 8 box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1), 9 10px 10px 10px rgba(0, 0, 0, 0.4), 10 inset -5px -5px 5px rgba(255, 255, 255, 0.2), 11 inset 10px 10px 10px rgba(0, 0, 0, 0.4); 12} 13 14.loader:before { 15 content: ""; 16 position: absolute; 17 top: 25px; 18 left: 25px; 19 right: 25px; 20 bottom: 25px; 21 z-index: 10; 22 background: #212121; 23 border-radius: 50%; 24 border: 2px solid #292929; 25 box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2), 26 inset 3px 3px 5px rgba(0, 0, 0, 0.5); 27} 28 29.loader span { 30 position: absolute; 31 width: 100%; 32 height: 100%; 33 border-radius: 50%; 34 background-image: linear-gradient( 35 -225deg, 36 #ff7402 0%, 37 #ffe700 50%, 38 #fff55e 100% 39 ); 40 filter: blur(20px); 41 z-index: -1; 42 animation: animate 0.5s linear infinite, hue 3s linear infinite; 43} 44 45@keyframes animate { 46 0% { 47 transform: rotate(0deg); 48 } 49 50 100% { 51 transform: rotate(360deg); 52 } 53} 54 55@keyframes hue { 56 0% { 57 filter: hue-rotate(0deg); 58 } 59 60 100% { 61 filter: hue-rotate(360deg); 62 } 63} 64 65 66
Comments
MIT License