Loader by WerlynRodriguez

1/* Butterfly loader created by WerlynDev in Uiverse.io*/
2
3.loader {
4  --sizeLoader: 60px;
5  --sizeLoaderHalf: calc(var(--sizeLoader) / 2);
6  --stepBtf: calc(var(--sizeLoader) / 10);
7  display: flex;
8  position: relative;
9  flex-direction: row;
10  justify-content: center;
11  align-items: center;
12  width: var(--sizeLoader);
13  height: var(--sizeLoader);
14}
15
16.loader:hover {
17  cursor: progress;
18}
19
20.loader[anim1] {
21  animation: anim1 0.3s alternate ease-in-out infinite;
22}
23
24.loader:not([anim1]) {
25  right: var(--sizeLoaderHalf);
26  transform-origin: center right;
27  animation: moveAround 2s linear infinite;
28}
29
30.loader[showShadow] {
31  filter: drop-shadow(0 10px 10px #060606de);
32}
33
34.loader svg:nth-child(1) {
35  position: relative;
36  height: 100%;
37  left: 2%;
38  transform-origin: center right;
39  animation: wing 0.5s ease-in-out infinite;
40}
41
42.loader svg:nth-child(2) {
43  height: 50%;
44}
45
46.loader svg:nth-child(3) {
47  position: relative;
48  height: 100%;
49  left: -2%;
50  transform-origin: center left;
51  animation: wing 0.5s ease-in-out infinite;
52}
53
54@keyframes wing {
55  0% {
56    transform: rotateY(0deg);
57  }
58
59  50% {
60    transform: rotateY(60deg);
61  }
62
63  100% {
64    transform: rotateY(0deg);
65  }
66}
67
68@keyframes moveAround {
69  0% {
70    transform: rotate(0deg);
71  }
72
73  100% {
74    transform: rotate(360deg);
75  }
76}
77
78@keyframes anim1 {
79  from {
80    transform: translateY(0px);
81  }
82
83  to {
84    transform: translateY(var(--stepBtf));
85  }
86}
87
88/* @media (prefers-color-scheme: dark) {
89  .loader[showShadow]{
90    filter: drop-shadow(0 10px 10px #dbdbdbde);
91  }
92} */