Loader by Ratinax
#212121
1.sun { 2 position: relative; 3 animation: rotate 4s linear infinite; 4 --color: yellow; 5 --scale: 0.4; 6} 7 8.center { 9 height: calc(var(--scale) * 10em); 10 width: calc(var(--scale) * 10em); 11 background-color: var(--color); 12 border-radius: 50%; 13 box-shadow: 0 0 calc(var(--scale) * 3em) var(--color); 14} 15 16.ray { 17 position: absolute; 18 height: calc(var(--scale) * 3em); 19 width: calc(var(--scale) * 0.5em); 20 box-shadow: 0 0 calc(var(--scale) * 1em) var(--color); 21 background-color: var(--color); 22} 23 24.r-1 { 25 margin-left: calc(var(--scale) * 4.75em); 26 margin-top: calc(var(--scale) * 1em); 27} 28 29.r-2 { 30 margin-left: calc(var(--scale) * 12.25em); 31 margin-top: calc(var(--scale) * -6.25em); 32 transform: rotate(90deg); 33} 34 35.r-3 { 36 margin-left: calc(var(--scale) * 4.75em); 37 margin-top: calc(var(--scale) * -14em); 38} 39 40.r-4 { 41 margin-left: calc(var(--scale) * -2.75em); 42 margin-top: calc(var(--scale) * -6.25em); 43 transform: rotate(90deg); 44} 45 46.r-5 { 47 margin-left: calc(var(--scale) * -0.5em); 48 margin-top: calc(var(--scale) * -1em); 49 transform: rotate(45deg); 50} 51 52.r-6 { 53 margin-left: calc(var(--scale) * 9.75em); 54 margin-top: calc(var(--scale) * -1em); 55 transform: rotate(-45deg); 56} 57 58.r-7 { 59 margin-left: calc(var(--scale) * 10.25em); 60 margin-top: calc(var(--scale) * -11.75em); 61 transform: rotate(45deg); 62} 63 64.r-8 { 65 margin-left: calc(var(--scale) * -0.5em); 66 margin-top: calc(var(--scale) * -11.75em); 67 transform: rotate(-45deg); 68} 69 70@keyframes rotate { 71 0% { 72 transform: rotate(0deg); 73 } 74 75 100% { 76 transform: rotate(360deg); 77 } 78}
507 views
Variation of aloader
MIT License