Loader by Valeron-T

#212121

1.loader {
2  position: relative;
3  width: 150px;
4  height: 150px;
5  background: #212121;
6  border-radius: 50%;
7  box-shadow: inset 0px 0px 7px seagreen;
8  border: 1px solid seagreen;
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  overflow: hidden;
13}
14
15.loader::before {
16  content: "";
17  position: absolute;
18  inset: 20px;
19  background: transparent;
20  border: 1px solid seagreen;
21  border-radius: 50%;
22  box-shadow: inset 0px 0px 5px seagreen;
23}
24
25.loader::after {
26  content: "";
27  position: absolute;
28  width: 50px;
29  height: 50px;
30  border-radius: 50%;
31  border: 1px solid seagreen;
32  box-shadow: inset 0px 0px 3px seagreen;
33}
34
35.loader span {
36  position: absolute;
37  top: 50%;
38  left: 50%;
39  width: 100%;
40  height: 100%;
41  background: transparent;
42  transform-origin: top left;
43  animation: radar81 2s linear infinite;
44  box-shadow: -25px -75px 30px -50px seagreen;
45  border-top: 2px solid #2e8b57;
46}
47
48.loader span::before {
49  display: none;
50  content: "";
51  position: absolute;
52  top: 0;
53  left: 0;
54  width: 15%;
55  height: 100%;
56  background: seagreen;
57  transform-origin: top left;
58  transform: rotate(-90deg);
59  filter: blur(15px) drop-shadow(10px 0px 10px seagreen);
60}
61
62@keyframes radar81 {
63  0% {
64    transform: rotate(0deg);
65  }
66
67  100% {
68    transform: rotate(360deg);
69  }
70}
71
72#dot-1 {
73  --dot-start-top: 100px;
74  --dot-start-left: 140px;
75  --dot-end-top: 130px;
76  --dot-end-left: 20px;
77  --delay: 0s;
78}
79
80#dot-2 {
81  --dot-start-top: 100px;
82  --dot-start-left: 0px;
83  --dot-end-top: -3px;
84  --dot-end-left: 90px;
85  --delay: 0s;
86}
87
88#dot-3 {
89  --dot-start-top: 100px;
90  --dot-start-left: 105px;
91  --dot-end-top: 18px;
92  --dot-end-left: 18px;
93  --delay: 0s;
94}
95
96#dot-4 {
97  --dot-start-top: 110px;
98  --dot-start-left: 150px;
99  --dot-end-top: 140px;
100  --dot-end-left: 30px;
101  --delay: 0s;
102}
103
104#dot-5 {
105  --dot-start-top: -5px;
106  --dot-start-left: 85px;
107  --dot-end-top: 125px;
108  --dot-end-left: 120px;
109  --delay: 4s;
110}
111
112.dot {
113  width: 5px;
114  height: 5px;
115  position: absolute;
116  top: var(--dot-start-top);
117  left: var(--dot-start-left);
118  border-radius: 9999px;
119  background: rgba(255, 255, 255);
120  box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
121    0px 0px 10px 2px rgba(0, 255, 135, 0.3);
122  -webkit-animation: fly 32s linear infinite;
123  animation-delay: var(--delay);
124  -moz-animation: fly 32s linear infinite;
125}
126
127@keyframes fly {
128  0% {
129    top: var(--dot-start-top);
130    left: var(--dot-start-left);
131  }
132
133  100% {
134    top: var(--dot-end-top);
135    left: var(--dot-end-left);
136  }
137
138  5%,
139  15%,
140  25%,
141  35%,
142  45%,
143  55%,
144  65%,
145  75%,
146  85%,
147  95% {
148    background: rgba(255, 255, 255, 1);
149    box-shadow: inset 0 0 10px 2px rgba(0, 255, 182, 0.5),
150      0 0 15px 2px rgba(0, 255, 135, 1);
151  }
152
153  0%,
154  10%,
155  20%,
156  30%,
157  40%,
158  50%,
159  60%,
160  70%,
161  80%,
162  90% {
163    background: rgba(255, 255, 255, 0.3);
164    box-shadow: inset 0 0 10px 2px rgba(0, 255, 182, 0.5),
165      0 0 5px 2px rgba(0, 255, 135, 0.3);
166  }
167}
168

.loader {
  position: relative;
  width: 150px;
  height: 150px;
  background: #212121;
  border-radius: 50%;
  box-shadow: inset 0px 0px 7px seagreen;
  border: 1px solid seagreen;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader::before {
  content: "";
  position: absolute;
  inset: 20px;
  background: transparent;
  border: 1px solid seagreen;
  border-radius: 50%;
  box-shadow: inset 0px 0px 5px seagreen;
}

.loader::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid seagreen;
  box-shadow: inset 0px 0px 3px seagreen;
}

.loader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar81 2s linear infinite;
  box-shadow: -25px -75px 30px -50px seagreen;
  border-top: 2px solid #2e8b57;
}

.loader span::before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 100%;
  background: seagreen;
  transform-origin: top left;
  transform: rotate(-90deg);
  filter: blur(15px) drop-shadow(10px 0px 10px seagreen);
}

@keyframes radar81 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#dot-1 {
  --dot-start-top: 100px;
  --dot-start-left: 140px;
  --dot-end-top: 130px;
  --dot-end-left: 20px;
  --delay: 0s;
}

#dot-2 {
  --dot-start-top: 100px;
  --dot-start-left: 0px;
  --dot-end-top: -3px;
  --dot-end-left: 90px;
  --delay: 0s;
}

#dot-3 {
  --dot-start-top: 100px;
  --dot-start-left: 105px;
  --dot-end-top: 18px;
  --dot-end-left: 18px;
  --delay: 0s;
}

#dot-4 {
  --dot-start-top: 110px;
  --dot-start-left: 150px;
  --dot-end-top: 140px;
  --dot-end-left: 30px;
  --delay: 0s;
}

#dot-5 {
  --dot-start-top: -5px;
  --dot-start-left: 85px;
  --dot-end-top: 125px;
  --dot-end-left: 120px;
  --delay: 4s;
}

.dot {
  width: 5px;
  height: 5px;
  position: absolute;
  top: var(--dot-start-top);
  left: var(--dot-start-left);
  border-radius: 9999px;
  background: rgba(255, 255, 255);
  box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
    0px 0px 10px 2px rgba(0, 255, 135, 0.3);
  -webkit-animation: fly 32s linear infinite;
  animation-delay: var(--delay);
  -moz-animation: fly 32s linear infinite;
}

@keyframes fly {
  0% {
    top: var(--dot-start-top);
    left: var(--dot-start-left);
  }

  100% {
    top: var(--dot-end-top);
    left: var(--dot-end-left);
  }

  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    background: rgba(255, 255, 255, 1);
    box-shadow: inset 0 0 10px 2px rgba(0, 255, 182, 0.5),
      0 0 15px 2px rgba(0, 255, 135, 1);
  }

  0%,
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90% {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 10px 2px rgba(0, 255, 182, 0.5),
      0 0 5px 2px rgba(0, 255, 135, 0.3);
  }
}

Toggle prefixes

143 views

Variation of aloader

Copy to Figma

143 views

Variation of aloader

Comments

MIT License

Copyright - 2024 mrhyddenn  
Copyright - 2024 Valeron-T (Valeron ) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.