Skip to content

Commit aac0713

Browse files
JoshK2JoshK2
committed
new loader - orbitals-loader
1 parent 09cd06f commit aac0713

File tree

3 files changed

+176
-0
lines changed

3 files changed

+176
-0
lines changed

‎src/App.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@
6161
<SpinnerLoader :color="'#be97e8'" />
6262
<SpinnerLoader />
6363
</div>
64+
<div class="block">
65+
<OrbitalsLoader :color="'#54f1d2'" />
66+
<OrbitalsLoader :color="'#be97e8'" />
67+
<OrbitalsLoader />
68+
</div>
6469
<div style="clear: both"></div>
6570
</div>
6671
</template>
@@ -78,6 +83,7 @@ import RingLoader from './components/RingLoader.vue'
7883
import RippleLoader from './components/RippleLoader.vue'
7984
import RollerLoader from './components/RollerLoader.vue'
8085
import SpinnerLoader from './components/SpinnerLoader.vue'
86+
import OrbitalsLoader from './components/OrbitalsLoader.vue'
8187
8288
export default {
8389
name: 'app',
@@ -94,6 +100,7 @@ export default {
94100
RippleLoader,
95101
RollerLoader,
96102
SpinnerLoader,
103+
OrbitalsLoader
97104
},
98105
}
99106
</script>

‎src/components/OrbitalsLoader.vue‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<template>
2+
<div v-show="loading" class="lds-orbitals">
3+
<div class="center" v-bind:style="[backgroundSpinnerStyle]"></div>
4+
<div class="inner-spin">
5+
<div class="inner-arc inner-arc_start-a" v-bind:style="[borderSpinnerStyle]"></div>
6+
<div class="inner-arc inner-arc_end-a" v-bind:style="[borderSpinnerStyle]"></div>
7+
<div class="inner-arc inner-arc_start-b" v-bind:style="[borderSpinnerStyle]"></div>
8+
<div class="inner-arc inner-arc_end-b" v-bind:style="[borderSpinnerStyle]"></div>
9+
<div class="inner-moon-a" v-bind:style="[backgroundSpinnerStyle]"></div>
10+
<div class="inner-moon-b" v-bind:style="[backgroundSpinnerStyle]"></div>
11+
</div>
12+
<div class="outer-spin">
13+
<div class="outer-arc outer-arc_start-a" v-bind:style="[borderSpinnerStyle]"></div>
14+
<div class="outer-arc outer-arc_end-a" v-bind:style="[borderSpinnerStyle]"></div>
15+
<div class="outer-arc outer-arc_start-b" v-bind:style="[borderSpinnerStyle]"></div>
16+
<div class="outer-arc outer-arc_end-b" v-bind:style="[borderSpinnerStyle]"></div>
17+
<div class="outer-moon-a" v-bind:style="[backgroundSpinnerStyle]"></div>
18+
<div class="outer-moon-b" v-bind:style="[backgroundSpinnerStyle]"></div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
name: 'OrbitalsLoader',
26+
props: {
27+
loading: {
28+
type: Boolean,
29+
default: true,
30+
},
31+
color: {
32+
type: String,
33+
default: '#7f58af',
34+
},
35+
},
36+
data() {
37+
return {
38+
backgroundSpinnerStyle: {
39+
background: this.color,
40+
},
41+
borderSpinnerStyle: {
42+
borderColor: this.color,
43+
},
44+
}
45+
},
46+
}
47+
</script>
48+
49+
<style scoped>
50+
.lds-orbitals {
51+
display: inline-block;
52+
position: relative;
53+
width: 80px;
54+
height: 80px;
55+
}
56+
.lds-orbitals * {
57+
--center: translate(-50%, -50%);
58+
}
59+
.lds-orbitals .center {
60+
position: absolute;
61+
width: 15px;
62+
height: 15px;
63+
border-radius: 50%;
64+
top: 50%;
65+
left: 50%;
66+
transform: var(--center);
67+
}
68+
.lds-orbitals .outer-spin,
69+
.lds-orbitals .inner-spin {
70+
position: absolute;
71+
top: 50%;
72+
left: 50%;
73+
}
74+
.lds-orbitals .inner-arc {
75+
position: absolute;
76+
width: 31px;
77+
height: 31px;
78+
border-radius: 50%;
79+
border: 3px solid;
80+
}
81+
.lds-orbitals .inner-arc_start-a {
82+
border-color: transparent transparent transparent;
83+
transform: var(--center) rotate(45deg);
84+
}
85+
.lds-orbitals .inner-arc_end-a {
86+
border-color: transparent transparent transparent;
87+
transform: var(--center) rotate(25deg);
88+
}
89+
.lds-orbitals .inner-moon-a {
90+
position: absolute;
91+
top: 50%;
92+
left: 50%;
93+
width: 8px;
94+
height: 8px;
95+
border-radius: 50%;
96+
transform: var(--center) translate(17px, 0);
97+
}
98+
.lds-orbitals .inner-moon-b {
99+
position: absolute;
100+
top: 50%;
101+
left: 50%;
102+
width: 8px;
103+
height: 8px;
104+
border-radius: 50%;
105+
transform: var(--center) translate(-17px, 0);
106+
}
107+
.lds-orbitals .inner-arc_start-b {
108+
border-color: transparent transparent transparent;
109+
transform: var(--center) rotate(65deg) scale(-1, -1);
110+
}
111+
.lds-orbitals .inner-arc_end-b {
112+
border-color: transparent transparent transparent;
113+
transform: var(--center) rotate(45deg) scale(-1, -1);
114+
}
115+
.lds-orbitals .outer-arc {
116+
position: absolute;
117+
width: 60px;
118+
height: 60px;
119+
border-radius: 50%;
120+
border: 3px solid;
121+
}
122+
.lds-orbitals .outer-arc_start-a {
123+
border-color: transparent transparent transparent;
124+
transform: var(--center) rotate(65deg);
125+
}
126+
.lds-orbitals .outer-arc_end-a {
127+
border-color: transparent transparent transparent;
128+
transform: var(--center) rotate(45deg);
129+
}
130+
.lds-orbitals .outer-moon-a {
131+
position: absolute;
132+
top: 50%;
133+
left: 50%;
134+
width: 9px;
135+
height: 9px;
136+
border-radius: 50%;
137+
transform: var(--center) translate(32px, 0);
138+
}
139+
.lds-orbitals .outer-moon-b {
140+
position: absolute;
141+
top: 50%;
142+
left: 50%;
143+
width: 9px;
144+
height: 9px;
145+
border-radius: 50%;
146+
transform: var(--center) translate(-32px, 0);
147+
}
148+
.lds-orbitals .outer-arc_start-b {
149+
border-color: transparent transparent transparent;
150+
transform: var(--center) rotate(65deg) scale(-1, -1);
151+
}
152+
.lds-orbitals .outer-arc_end-b {
153+
border-color: transparent transparent transparent;
154+
transform: var(--center) rotate(45deg) scale(-1, -1);
155+
}
156+
.lds-orbitals .outer-spin {
157+
animation: spin 4s linear infinite;
158+
}
159+
.lds-orbitals .inner-spin {
160+
animation: spin 3s linear infinite;
161+
}
162+
@keyframes spin {
163+
100% {
164+
transform: rotate(360deg);
165+
}
166+
}
167+
</style>

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import RingLoader from './RingLoader.vue'
1010
import RippleLoader from './RippleLoader.vue'
1111
import RollerLoader from './RollerLoader.vue'
1212
import SpinnerLoader from './SpinnerLoader.vue'
13+
import OrbitalsLoader from './OrbitalsLoader.vue'
1314

1415
export {
1516
CircleLoader,
@@ -24,4 +25,5 @@ export {
2425
RippleLoader,
2526
RollerLoader,
2627
SpinnerLoader,
28+
OrbitalsLoader,
2729
}

0 commit comments

Comments
 (0)