Loader by Nawsome

Posted by

@Nawsome

Theme:

Dark

#loader

#212121

5.1K views

Add prefixes

1.pl {
2  box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  position: relative;
7  letter-spacing: 0.1em;
8  text-transform: uppercase;
9  transform: rotateX(30deg) rotateZ(45deg);
10  width: 14em;
11  height: 14em;
12}
13
14.pl, .pl__dot {
15  border-radius: 50%;
16}
17
18.pl__dot {
19  animation-name: shadow724;
20  box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5);
21  top: calc(50% - 0.75em);
22  left: calc(50% - 0.75em);
23  width: 1.5em;
24  height: 1.5em;
25}
26
27.pl__dot, .pl__dot:before, .pl__dot:after {
28  animation-duration: 2s;
29  animation-iteration-count: infinite;
30  position: absolute;
31}
32
33.pl__dot:before, .pl__dot:after {
34  content: "";
35  display: block;
36  left: 0;
37  width: inherit;
38  transition: background-color var(--trans-dur);
39}
40
41.pl__dot:before {
42  animation-name: pushInOut1724;
43  background-color: var(--bg);
44  border-radius: inherit;
45  box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset;
46  height: inherit;
47  z-index: 1;
48}
49
50.pl__dot:after {
51  animation-name: pushInOut2724;
52  background-color: var(--primary1);
53  border-radius: 0.75em;
54  box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset;
55  bottom: 0;
56  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
57  height: 3em;
58  transform: rotate(-45deg);
59  transform-origin: 50% 2.25em;
60}
61
62.pl__dot:nth-child(1) {
63  transform: rotate(0deg) translateX(5em) rotate(0deg);
64  z-index: 5;
65}
66
67.pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after {
68  animation-delay: 0s;
69}
70
71.pl__dot:nth-child(2) {
72  transform: rotate(-30deg) translateX(5em) rotate(30deg);
73  z-index: 4;
74}
75
76.pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after {
77  animation-delay: -0.1666666667s;
78}
79
80.pl__dot:nth-child(3) {
81  transform: rotate(-60deg) translateX(5em) rotate(60deg);
82  z-index: 3;
83}
84
85.pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after {
86  animation-delay: -0.3333333333s;
87}
88
89.pl__dot:nth-child(4) {
90  transform: rotate(-90deg) translateX(5em) rotate(90deg);
91  z-index: 2;
92}
93
94.pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after {
95  animation-delay: -0.5s;
96}
97
98.pl__dot:nth-child(5) {
99  transform: rotate(-120deg) translateX(5em) rotate(120deg);
100  z-index: 1;
101}
102
103.pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after {
104  animation-delay: -0.6666666667s;
105}
106
107.pl__dot:nth-child(6) {
108  transform: rotate(-150deg) translateX(5em) rotate(150deg);
109  z-index: 1;
110}
111
112.pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after {
113  animation-delay: -0.8333333333s;
114}
115
116.pl__dot:nth-child(7) {
117  transform: rotate(-180deg) translateX(5em) rotate(180deg);
118  z-index: 2;
119}
120
121.pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after {
122  animation-delay: -1s;
123}
124
125.pl__dot:nth-child(8) {
126  transform: rotate(-210deg) translateX(5em) rotate(210deg);
127  z-index: 3;
128}
129
130.pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after {
131  animation-delay: -1.1666666667s;
132}
133
134.pl__dot:nth-child(9) {
135  transform: rotate(-240deg) translateX(5em) rotate(240deg);
136  z-index: 4;
137}
138
139.pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after {
140  animation-delay: -1.3333333333s;
141}
142
143.pl__dot:nth-child(10) {
144  transform: rotate(-270deg) translateX(5em) rotate(270deg);
145  z-index: 5;
146}
147
148.pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after {
149  animation-delay: -1.5s;
150}
151
152.pl__dot:nth-child(11) {
153  transform: rotate(-300deg) translateX(5em) rotate(300deg);
154  z-index: 6;
155}
156
157.pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after {
158  animation-delay: -1.6666666667s;
159}
160
161.pl__dot:nth-child(12) {
162  transform: rotate(-330deg) translateX(5em) rotate(330deg);
163  z-index: 6;
164}
165
166.pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after {
167  animation-delay: -1.8333333333s;
168}
169
170.pl__text {
171  font-size: 0.75em;
172  max-width: 5rem;
173  position: relative;
174  text-shadow: 0 0 0.1em var(--fg-t);
175  transform: rotateZ(-45deg);
176}
177
178/* Animations */
179@keyframes shadow724 {
180  from {
181    animation-timing-function: ease-in;
182    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
183  }
184
185  25% {
186    animation-timing-function: ease-out;
187    box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5);
188  }
189
190  50%, to {
191    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
192  }
193}
194
195@keyframes pushInOut1724 {
196  from {
197    animation-timing-function: ease-in;
198    background-color: var(--bg);
199    transform: translate(0, 0);
200  }
201
202  25% {
203    animation-timing-function: ease-out;
204    background-color: var(--primary2);
205    transform: translate(-71%, -71%);
206  }
207
208  50%, to {
209    background-color: var(--bg);
210    transform: translate(0, 0);
211  }
212}
213
214@keyframes pushInOut2724 {
215  from {
216    animation-timing-function: ease-in;
217    background-color: var(--bg);
218    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
219  }
220
221  25% {
222    animation-timing-function: ease-out;
223    background-color: var(--primary1);
224    clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);
225  }
226
227  50%, to {
228    background-color: var(--bg);
229    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
230  }
231}

.pl {
  box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotateX(30deg) rotateZ(45deg);
  width: 14em;
  height: 14em;
}

.pl, .pl__dot {
  border-radius: 50%;
}

.pl__dot {
  animation-name: shadow724;
  box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5);
  top: calc(50% - 0.75em);
  left: calc(50% - 0.75em);
  width: 1.5em;
  height: 1.5em;
}

.pl__dot, .pl__dot:before, .pl__dot:after {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  position: absolute;
}

.pl__dot:before, .pl__dot:after {
  content: "";
  display: block;
  left: 0;
  width: inherit;
  transition: background-color var(--trans-dur);
}

.pl__dot:before {
  animation-name: pushInOut1724;
  background-color: var(--bg);
  border-radius: inherit;
  box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset;
  height: inherit;
  z-index: 1;
}

.pl__dot:after {
  animation-name: pushInOut2724;
  background-color: var(--primary1);
  border-radius: 0.75em;
  box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset;
  bottom: 0;
  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  height: 3em;
  transform: rotate(-45deg);
  transform-origin: 50% 2.25em;
}

.pl__dot:nth-child(1) {
  transform: rotate(0deg) translateX(5em) rotate(0deg);
  z-index: 5;
}

.pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after {
  animation-delay: 0s;
}

.pl__dot:nth-child(2) {
  transform: rotate(-30deg) translateX(5em) rotate(30deg);
  z-index: 4;
}

.pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after {
  animation-delay: -0.1666666667s;
}

.pl__dot:nth-child(3) {
  transform: rotate(-60deg) translateX(5em) rotate(60deg);
  z-index: 3;
}

.pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after {
  animation-delay: -0.3333333333s;
}

.pl__dot:nth-child(4) {
  transform: rotate(-90deg) translateX(5em) rotate(90deg);
  z-index: 2;
}

.pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after {
  animation-delay: -0.5s;
}

.pl__dot:nth-child(5) {
  transform: rotate(-120deg) translateX(5em) rotate(120deg);
  z-index: 1;
}

.pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after {
  animation-delay: -0.6666666667s;
}

.pl__dot:nth-child(6) {
  transform: rotate(-150deg) translateX(5em) rotate(150deg);
  z-index: 1;
}

.pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after {
  animation-delay: -0.8333333333s;
}

.pl__dot:nth-child(7) {
  transform: rotate(-180deg) translateX(5em) rotate(180deg);
  z-index: 2;
}

.pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after {
  animation-delay: -1s;
}

.pl__dot:nth-child(8) {
  transform: rotate(-210deg) translateX(5em) rotate(210deg);
  z-index: 3;
}

.pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after {
  animation-delay: -1.1666666667s;
}

.pl__dot:nth-child(9) {
  transform: rotate(-240deg) translateX(5em) rotate(240deg);
  z-index: 4;
}

.pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after {
  animation-delay: -1.3333333333s;
}

.pl__dot:nth-child(10) {
  transform: rotate(-270deg) translateX(5em) rotate(270deg);
  z-index: 5;
}

.pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after {
  animation-delay: -1.5s;
}

.pl__dot:nth-child(11) {
  transform: rotate(-300deg) translateX(5em) rotate(300deg);
  z-index: 6;
}

.pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after {
  animation-delay: -1.6666666667s;
}

.pl__dot:nth-child(12) {
  transform: rotate(-330deg) translateX(5em) rotate(330deg);
  z-index: 6;
}

.pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after {
  animation-delay: -1.8333333333s;
}

.pl__text {
  font-size: 0.75em;
  max-width: 5rem;
  position: relative;
  text-shadow: 0 0 0.1em var(--fg-t);
  transform: rotateZ(-45deg);
}

/* Animations */
@keyframes shadow724 {
  from {
    animation-timing-function: ease-in;
    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
  }

  25% {
    animation-timing-function: ease-out;
    box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5);
  }

  50%, to {
    box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
  }
}

@keyframes pushInOut1724 {
  from {
    animation-timing-function: ease-in;
    background-color: var(--bg);
    transform: translate(0, 0);
  }

  25% {
    animation-timing-function: ease-out;
    background-color: var(--primary2);
    transform: translate(-71%, -71%);
  }

  50%, to {
    background-color: var(--bg);
    transform: translate(0, 0);
  }
}

@keyframes pushInOut2724 {
  from {
    animation-timing-function: ease-in;
    background-color: var(--bg);
    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  }

  25% {
    animation-timing-function: ease-out;
    background-color: var(--primary1);
    clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);
  }

  50%, to {
    background-color: var(--bg);
    clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  }
}

Nawsome

MIT License

Copyright - 2023 Nawsome  

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.