Loader by Subaashbala
#e8e8e8
1.loader { 2 position: relative; 3 --duration: 1500ms; /* minute hand's rotation time duration */ 4} 5.clockLoader { 6 width: 15em; 7 aspect-ratio: 1; 8 border-radius: 50%; 9 border: 0.25em solid black; 10 background: rgba(255, 255, 255, 0.5); 11 box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.171); 12 backdrop-filter: blur(10px); 13 z-index: 100; 14 animation: floatEffect 15s linear infinite alternate; 15} 16.clockLoader::after { 17 content: ""; 18 position: absolute; 19 left: 50%; 20 top: 50%; 21 transform: translate(-50%, -65%); 22 width: 0.5em; 23 aspect-ratio: 1; 24 border-radius: 50%; 25 background-color: black; 26} 27.clockHand { 28 position: absolute; 29 background-color: black; 30 border-radius: 5em; 31 width: 0.25em; 32 transform-origin: bottom; 33 left: 50%; 34 top: 50%; 35 transform: translate(-50%, -100%); 36} 37.hourHand { 38 height: 20%; 39 animation: rotateHand calc(12 * var(--duration)) linear infinite; 40} 41.minuteHand { 42 height: 30%; 43 animation: rotateHand var(--duration) linear infinite; 44} 45.decorativeElementContainer { 46 position: absolute; 47 top: 50%; 48 left: 50%; 49 transform-origin: center center; 50 animation: rotate calc(50 * var(--duration)) linear infinite; 51 z-index: -1; 52 transform: translate(-50%, -50%); 53} 54.decorativeElement { 55 position: relative; 56 width: 7em; 57 aspect-ratio: 1; 58 border-radius: 50%; 59 z-index: -1; 60} 61.decorativeElement1 { 62 left: 50% !important; 63 background: orangered; 64 animation: floatEffect 16ss linear infinite; 65} 66.decorativeElement2 { 67 right: 55%; 68 background: hotpink; 69} 70@keyframes rotateHand { 71 to { 72 transform: translate(-50%, -100%) rotate(360deg); 73 } 74} 75@keyframes rotate { 76 to { 77 transform: translate(-50%, -50%) rotateZ(360deg); 78 } 79} 80@keyframes floatEffect { 81 0% { 82 transform: translate(0); 83 } 84 100% { 85 transform: translate(0, 2em); 86 } 87} 88
168 views
168 views
MIT License