Loader by escannord
#e8e8e8
1.loader { 2 width: 220px; 3 height: 220px; 4 border-radius: 50%; 5 position: relative; 6 border: solid 5px transparent; 7 box-shadow: 5px 5px 5px rgb(88, 87, 87), inset 5px 5px 5px rgb(85, 80, 80), 8 inset -1px -1px 10px rgba(0, 0, 0, 0.432), 9 -1px -1px 10px rgba(0, 0, 0, 0.281); 10} 11 12.loader::before { 13 content: ""; 14 display: inline-block; 15 position: absolute; 16 width: 180px; 17 height: 180px; 18 border-radius: 50%; 19 top: 50%; 20 left: 50%; 21 transform: translate(-50%, -50%); 22 box-shadow: 5px 5px 20px black, -2px -2px 40px black; 23 background: repeating-conic-gradient( 24 rgb(61, 59, 59) 0%, 25 rgb(248, 248, 246) 15%, 26 rgb(54, 52, 52) 33.33% 27 ); 28} 29 30.ball { 31 width: 15px; 32 height: 15px; 33 display: inline-block; 34 background: radial-gradient( 35 circle at 8px 5px, 36 white 5%, 37 rgba(54, 53, 53, 0.685) 38 ); 39 border-radius: 50%; 40 position: absolute; 41 top: 50%; 42 left: 50%; 43 transform: translate(-50%, -50%) translateX(97.5px); 44 animation: rotate 5s calc(var(--delay) * 0.2s) infinite linear; 45} 46 47@keyframes rotate { 48 0% { 49 transform: translate(-50%, -50%) rotate(0deg) translateX(97.5px); 50 } 51 52 100% { 53 transform: translate(-50%, -50%) rotate(360deg) translateX(97.5px); 54 } 55} 56
529 views
529 views
Variations
1 MIT License