Loader by StealthWorm
#212121
1.loader { 2 display: flex; 3 width: 8rem; 4 height: 8rem; 5 justify-content: center; 6 align-items: center; 7 position: relative; 8 flex-direction: column; 9} 10 11.curve { 12 width: 180%; 13 height: 180%; 14 position: absolute; 15 animation: rotate 8s linear infinite; 16 fill: transparent; 17} 18 19.curve text { 20 letter-spacing: 20px; 21 text-transform: uppercase; 22 font: 1.5em "Fira Sans", sans-serif; 23 fill: white; 24 filter: drop-shadow(0 2px 8px black); 25} 26 27.blackhole { 28 z-index: -1; 29 display: flex; 30 position: absolute; 31 width: 8rem; 32 height: 8rem; 33 align-items: center; 34 justify-content: center; 35} 36 37.blackhole-circle { 38 z-index: 0; 39 display: flex; 40 width: 100%; 41 height: 100%; 42 border-radius: 50%; 43 background: radial-gradient(circle at center, black 25%, white 35%, white 100%); 44 box-shadow: 0px 0px 2rem #c2babb; 45 align-items: center; 46 justify-content: center; 47} 48 49.blackhole-circle::after { 50 z-index: 0; 51 position: absolute; 52 content: ""; 53 display: flex; 54 width: 100%; 55 height: 100%; 56 border-radius: 50%; 57 border: 4px solid white; 58 background: radial-gradient(circle at center, black 35%, white 60%, white 100%); 59 box-shadow: 0px 0px 5rem #c2babb; 60 align-items: center; 61 justify-content: center; 62 filter: blur(4px); 63 animation: pulseAnimation linear infinite 2s alternate-reverse; 64} 65 66.blackhole-circle::before { 67 z-index: 1; 68 content: ""; 69 display: flex; 70 width: 4rem; 71 height: 4rem; 72 border: 2px solid #ffffff; 73 box-shadow: 3px 3px 10px #c2babb, inset 0 0 1rem #ffffff; 74 border-radius: 50%; 75 top: 5rem; 76 filter: blur(0.5px); 77 animation: rotate linear infinite 3s; 78} 79 80.blackhole-disc { 81 position: absolute; 82 z-index: 0; 83 display: flex; 84 width: 5rem; 85 height: 10rem; 86 border-radius: 50%; 87 background: radial-gradient(circle at center, #ffffff 80%, #353535 90%, white 100%); 88 filter: blur(1rem) brightness(130%); 89 border: 1rem solid white; 90 box-shadow: 0px 0px 3rem #d7c4be; 91 transform: rotate3d(1, 1, 1, 220deg); 92 animation: pulseAnimation2 linear infinite 2s alternate-reverse; 93 justify-content: center; 94 align-items: center; 95} 96 97.blackhole-disc::before { 98 content: ""; 99 position: absolute; 100 z-index: 0; 101 display: flex; 102 width: 5rem; 103 height: 10rem; 104 border-radius: 50%; 105 background: radial-gradient(circle at center, #ffffff 80%, #353535 90%, white 100%); 106 filter: blur(3rem); 107 border: 1rem solid white; 108 box-shadow: 0px 0px 6rem #d7c4be; 109 animation: pulseAnimation linear infinite 2s alternate-reverse; 110} 111 112@keyframes rotate { 113 0% { 114 transform: rotate(0deg); 115 } 116 117 100% { 118 transform: rotate(360deg); 119 } 120} 121 122@keyframes pulseAnimation { 123 0% { 124 box-shadow: 0px 0px 3rem #c2babb; 125 transform: scale(1); 126 } 127 128 100% { 129 box-shadow: 0px 0px 5rem #c2babb; 130 transform: scale(1.09); 131 } 132} 133 134@keyframes pulseAnimation2 { 135 0% { 136 box-shadow: 0px 0px 3rem #c2babb; 137 transform: rotate3d(1, 1, 1, 220deg) scale(1); 138 } 139 140 100% { 141 box-shadow: 0px 0px 5rem #c2babb; 142 transform: rotate3d(1, 1, 1, 220deg) scale(.95); 143 } 144} 145
1.5K views
1.5K views
MIT License