Loader by Subaashbala

#000000

1.modelViewPort {
2  /* The black circle background around the model*/
3  perspective: 1000px;
4  width: 20rem;
5  aspect-ratio: 1;
6  border-radius: 50%;
7  display: flex;
8  justify-content: center;
9  align-items: center;
10  background: #000;
11  overflow: hidden;
12}
13.eva {
14  --EVA-ROTATION-DURATION: 4s;
15  transform-style: preserve-3d;
16  animation: rotateRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
17}
18.head {
19  position: relative;
20  width: 6rem;
21  height: 4rem;
22  border-radius: 48% 53% 45% 55% / 79% 79% 20% 22%;
23  background: linear-gradient(to right, white 45%, gray);
24}
25.eyeChamber {
26  width: 4.5rem;
27  height: 2.75rem;
28  position: relative;
29  left: 50%;
30  top: 55%;
31  border-radius: 45% 53% 45% 48% / 62% 59% 35% 34%;
32  background-color: #0c203c;
33  box-shadow: 0px 0px 2px 2px white, inset 0px 0px 0px 2px black;
34  transform: translate(-50%, -50%);
35  animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
36}
37.eye {
38  width: 1.2rem;
39  height: 1.5rem;
40  position: absolute;
41  border-radius: 50%;
42}
43.eye:first-child {
44  left: 12px;
45  top: 50%;
46  background: repeating-linear-gradient(
47    65deg,
48    #9bdaeb 0px,
49    #9bdaeb 1px,
50    white 2px
51  );
52  box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
53  transform: translate(0, -50%) rotate(-65deg);
54}
55.eye:nth-child(2) {
56  right: 12px;
57  top: 50%;
58  background: repeating-linear-gradient(
59    -65deg,
60    #9bdaeb 0px,
61    #9bdaeb 1px,
62    white 2px
63  );
64  box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
65  transform: translate(0, -50%) rotate(65deg);
66}
67.body {
68  width: 6rem;
69  height: 8rem;
70  position: relative;
71  margin-block-start: 0.25rem;
72  border-radius: 47% 53% 45% 55% / 12% 9% 90% 88%;
73  background: linear-gradient(to right, white 35%, gray);
74}
75.hand {
76  position: absolute;
77  left: -1.5rem;
78  top: 0.75rem;
79  width: 2rem;
80  height: 5.5rem;
81  border-radius: 40%;
82  background: linear-gradient(to left, white 15%, gray);
83  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.25);
84  transform: rotateY(55deg) rotateZ(10deg);
85}
86.hand:first-child {
87  animation: compensateRotation var(--EVA-ROTATION-DURATION) linear infinite
88    alternate;
89}
90.hand:nth-child(2) {
91  left: 92%;
92  background: linear-gradient(to right, white 15%, gray);
93  transform: rotateY(55deg) rotateZ(-10deg);
94  animation: compensateRotationRight var(--EVA-ROTATION-DURATION) linear
95    infinite alternate;
96}
97.scannerThing {
98  width: 0;
99  height: 0;
100  position: absolute;
101  left: 60%;
102  top: 10%;
103  border-top: 180px solid #9bdaeb;
104  border-left: 250px solid transparent;
105  border-right: 250px solid transparent;
106  transform-origin: top left;
107  mask: linear-gradient(to right, white, transparent 35%);
108  animation: glow 2s cubic-bezier(0.86, 0, 0.07, 1) infinite;
109}
110.scannerOrigin {
111  position: absolute;
112  width: 8px;
113  aspect-ratio: 1;
114  border-radius: 50%;
115  left: 60%;
116  top: 10%;
117  background: #9bdaeb;
118  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
119  animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite;
120}
121@keyframes rotateRight {
122  from {
123    transform: rotateY(0deg);
124  }
125  to {
126    transform: rotateY(25deg);
127  }
128}
129@keyframes moveRight {
130  from {
131    transform: translate(-50%, -50%);
132  }
133  to {
134    transform: translate(-40%, -50%);
135  }
136}
137@keyframes compensateRotation {
138  from {
139    transform: rotateY(55deg) rotateZ(10deg);
140  }
141  to {
142    transform: rotatey(30deg) rotateZ(10deg);
143  }
144}
145@keyframes compensateRotationRight {
146  from {
147    transform: rotateY(55deg) rotateZ(-10deg);
148  }
149  to {
150    transform: rotateY(70deg) rotateZ(-10deg);
151  }
152}
153@keyframes glow {
154  from {
155    opacity: 0;
156  }
157  20% {
158    opacity: 1;
159  }
160  45% {
161    transform: rotate(-25deg);
162  }
163  75% {
164    transform: rotate(5deg);
165  }
166  100% {
167    opacity: 0;
168  }
169}
170

.modelViewPort {
  /* The black circle background around the model*/
  perspective: 1000px;
  width: 20rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}
.eva {
  --EVA-ROTATION-DURATION: 4s;
  transform-style: preserve-3d;
  animation: rotateRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}
.head {
  position: relative;
  width: 6rem;
  height: 4rem;
  border-radius: 48% 53% 45% 55% / 79% 79% 20% 22%;
  background: linear-gradient(to right, white 45%, gray);
}
.eyeChamber {
  width: 4.5rem;
  height: 2.75rem;
  position: relative;
  left: 50%;
  top: 55%;
  border-radius: 45% 53% 45% 48% / 62% 59% 35% 34%;
  background-color: #0c203c;
  box-shadow: 0px 0px 2px 2px white, inset 0px 0px 0px 2px black;
  transform: translate(-50%, -50%);
  animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}
.eye {
  width: 1.2rem;
  height: 1.5rem;
  position: absolute;
  border-radius: 50%;
}
.eye:first-child {
  left: 12px;
  top: 50%;
  background: repeating-linear-gradient(
    65deg,
    #9bdaeb 0px,
    #9bdaeb 1px,
    white 2px
  );
  box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
  transform: translate(0, -50%) rotate(-65deg);
}
.eye:nth-child(2) {
  right: 12px;
  top: 50%;
  background: repeating-linear-gradient(
    -65deg,
    #9bdaeb 0px,
    #9bdaeb 1px,
    white 2px
  );
  box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
  transform: translate(0, -50%) rotate(65deg);
}
.body {
  width: 6rem;
  height: 8rem;
  position: relative;
  margin-block-start: 0.25rem;
  border-radius: 47% 53% 45% 55% / 12% 9% 90% 88%;
  background: linear-gradient(to right, white 35%, gray);
}
.hand {
  position: absolute;
  left: -1.5rem;
  top: 0.75rem;
  width: 2rem;
  height: 5.5rem;
  border-radius: 40%;
  background: linear-gradient(to left, white 15%, gray);
  box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.25);
  transform: rotateY(55deg) rotateZ(10deg);
}
.hand:first-child {
  animation: compensateRotation var(--EVA-ROTATION-DURATION) linear infinite
    alternate;
}
.hand:nth-child(2) {
  left: 92%;
  background: linear-gradient(to right, white 15%, gray);
  transform: rotateY(55deg) rotateZ(-10deg);
  animation: compensateRotationRight var(--EVA-ROTATION-DURATION) linear
    infinite alternate;
}
.scannerThing {
  width: 0;
  height: 0;
  position: absolute;
  left: 60%;
  top: 10%;
  border-top: 180px solid #9bdaeb;
  border-left: 250px solid transparent;
  border-right: 250px solid transparent;
  transform-origin: top left;
  mask: linear-gradient(to right, white, transparent 35%);
  animation: glow 2s cubic-bezier(0.86, 0, 0.07, 1) infinite;
}
.scannerOrigin {
  position: absolute;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 60%;
  top: 10%;
  background: #9bdaeb;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
  animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite;
}
@keyframes rotateRight {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(25deg);
  }
}
@keyframes moveRight {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-40%, -50%);
  }
}
@keyframes compensateRotation {
  from {
    transform: rotateY(55deg) rotateZ(10deg);
  }
  to {
    transform: rotatey(30deg) rotateZ(10deg);
  }
}
@keyframes compensateRotationRight {
  from {
    transform: rotateY(55deg) rotateZ(-10deg);
  }
  to {
    transform: rotateY(70deg) rotateZ(-10deg);
  }
}
@keyframes glow {
  from {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  45% {
    transform: rotate(-25deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    opacity: 0;
  }
}

Toggle prefixes

412 views

Copy to Figma

412 views

Comments

No variations yet

MIT License

Copyright - 2024 Subaashbala (Subaash) 

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.