Loader by omriluz
#e8e8e8
1.container { 2 position: relative; 3 width: 100%; 4 height: 200px; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005); 9} 10 11.container .loader { 12 position: absolute; 13 width: 200px; 14 height: 200px; 15 border-radius: 50%; 16 animation: animate 2s linear infinite; 17} 18 19.container .loader:nth-child(2), 20.container .loader:nth-child(4) { 21 animation-delay: -1s; 22} 23 24@keyframes animate { 25 0% { 26 transform: rotate(0deg); 27 filter: hue-rotate(360deg); 28 } 29 30 100% { 31 transform: rotate(360deg); 32 filter: hue-rotate(0deg); 33 } 34} 35 36.container .loader:nth-child(1)::before, 37.container .loader:nth-child(2)::before { 38 content: ''; 39 position: absolute; 40 top: 0; 41 left: 0; 42 width: 50%; 43 height: 100%; 44 background: linear-gradient(to top, transparent, rgba(0,255,249, 0.4)); 45 background-size: 100px 180px; 46 background-repeat: no-repeat; 47 border-top-left-radius: 100px; 48 border-bottom-left-radius: 100px; 49} 50 51.container .loader i { 52 position: absolute; 53 top: 0; 54 left: 50%; 55 transform: translateX(-50%); 56 width: 20px; 57 height: 20px; 58 background: #00fff9; 59 border-radius: 50%; 60 z-index: 100; 61 box-shadow: 0 0 10px #00fff9, 62 0 0 30px #00fff9, 63 0 0 40px #00fff9, 64 0 0 50px #00fff9, 65 0 0 60px #00fff9, 66 0 0 70px #00fff9, 67 0 0 80px #00fff9, 68 0 0 90px #00fff9, 69 0 0 100px #00fff9; 70} 71 72.container .loader span { 73 position: absolute; 74 inset: 20px; 75 background: #e8e8e8; 76 border-radius: 50%; 77 z-index: 1; 78}
593 views
593 views
omriluz Yesterday at 13:54
Yesterday at 13:54
Yes of course, Go ahead :)
bunyCode 5. May at 23:12
5. May at 23:12
Can i use it ? ✨
MIT License