Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 height: 60px; 4 aspect-ratio: 1; 5 position: relative; 6} 7 8.loader::before, 9.loader::after { 10 content: ""; 11 position: absolute; 12 inset: 0; 13 border-radius: 50%; 14 transform-origin: bottom; 15} 16 17.loader::after { 18 background: radial-gradient(at 75% 15%,#fffb,#0000 35%), 19 radial-gradient(at 80% 40%,#0000,#0008), 20 radial-gradient(circle 5px,#fff 94%,#0000), 21 radial-gradient(circle 10px,#000 94%,#0000), 22 linear-gradient(#F93318 0 0) top /100% calc(50% - 5px), 23 linear-gradient(#fff 0 0) bottom/100% calc(50% - 5px) 24 #000; 25 background-repeat: no-repeat; 26 animation: l20 1s infinite cubic-bezier(0.5,120,0.5,-120); 27} 28 29.loader::before { 30 background: #ddd; 31 filter: blur(8px); 32 transform: scaleY(0.4) translate(-13px, 0px); 33} 34 35@keyframes l20 { 36 37 30%,70% { 38 transform: rotate(0deg) 39 } 40 41 49.99% { 42 transform: rotate(0.2deg) 43 } 44 45 50% { 46 transform: rotate(-0.2deg) 47 } 48}
1.5K views
1.5K views
MIT License