Loader by Subaashbala
#e8e8e8
1.shape { 2 --BG-COLOR: #59d5e0; 3 --OUTLINE-COLOR: #068b97; 4 --OUTLINE-SIZE: 15px; 5 width: 7rem; 6 aspect-ratio: 1; 7 position: relative; 8 border-radius: 50%; 9 overflow: hidden; 10 display: flex; 11 justify-content: center; 12 outline: var(--OUTLINE-SIZE) solid var(--OUTLINE-COLOR); 13 background: var(--BG-COLOR); 14 box-shadow: 0px 0px calc(var(--OUTLINE-SIZE) + 25px) rgba(0, 0, 0, 0.438); 15 animation: morph 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; 16} 17.numRowContainer { 18 height: fit-content; 19 animation: infiniteScroll 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; 20} 21@keyframes infiniteScroll { 22 from { 23 transform: translate(0, 0); 24 } 25 to { 26 transform: translate(0, -50%); 27 } 28} 29@keyframes morph { 30 50% { 31 --BG-COLOR: PINK; 32 --OUTLINE-COLOR: #ff407d; 33 transform: rotate(150deg); 34 border-radius: 20%; 35 } 36 100% { 37 transform: rotate(360deg); 38 } 39} 40
195 views
195 views
MIT License