Skip to content

Commit e78ee75

Browse files
JoshK2JoshK2
committed
run prettier formater
1 parent 7b15d16 commit e78ee75

16 files changed

+209
-217
lines changed

‎src/App.vue‎

Lines changed: 169 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,176 @@
11
<template>
2-
<div>
32
<div>
4-
<h1>Vue Spinners</h1>
5-
<div class="normal-spinners">
6-
<CircleLoader :color="'#be97e8'" class="loader" />
7-
<DefaultLoader :color="'#be97e8'" class="loader" />
8-
<DualRingLoader :color="'#be97e8'" class="loader" />
9-
<EllipsisLoader :color="'#be97e8'" class="loader" />
10-
<FacebookLoader :color="'#be97e8'" class="loader" />
11-
<GridLoader :color="'#be97e8'" class="loader" />
12-
<HeartLoader :color="'#be97e8'" class="loader" />
13-
<HourglassLoader :color="'#be97e8'" class="loader" />
14-
<RingLoader :color="'#be97e8'" class="loader" />
15-
<RippleLoader :color="'#be97e8'" class="loader" />
16-
<RollerLoader :color="'#be97e8'" class="loader" />
17-
<SpinnerLoader :color="'#be97e8'" class="loader" />
18-
<OrbitalsLoader :color="'#be97e8'" class="loader" />
3+
<div>
4+
<h1>Vue Spinners</h1>
5+
<div class="normal-spinners">
6+
<CircleLoader :color="'#be97e8'" class="loader" />
7+
<DefaultLoader :color="'#be97e8'" class="loader" />
8+
<DualRingLoader :color="'#be97e8'" class="loader" />
9+
<EllipsisLoader :color="'#be97e8'" class="loader" />
10+
<FacebookLoader :color="'#be97e8'" class="loader" />
11+
<GridLoader :color="'#be97e8'" class="loader" />
12+
<HeartLoader :color="'#be97e8'" class="loader" />
13+
<HourglassLoader :color="'#be97e8'" class="loader" />
14+
<RingLoader :color="'#be97e8'" class="loader" />
15+
<RippleLoader :color="'#be97e8'" class="loader" />
16+
<RollerLoader :color="'#be97e8'" class="loader" />
17+
<SpinnerLoader :color="'#be97e8'" class="loader" />
18+
<OrbitalsLoader :color="'#be97e8'" class="loader" />
19+
<div style="clear: both"></div>
20+
</div>
21+
</div>
22+
<div>
23+
<h2>Animation Duration Property</h2>
24+
<div class="normal-spinners">
25+
<CircleLoader :color="'#be97e8'" duration="5s" />
26+
<DefaultLoader :color="'#be97e8'" duration="5s" />
27+
<DualRingLoader :color="'#be97e8'" duration="5s" />
28+
<!-- <EllipsisLoader :color="'#be97e8'" duration="1s" /> -->
29+
<FacebookLoader :color="'#be97e8'" duration="5s" />
30+
<GridLoader :color="'#be97e8'" duration="5s" />
31+
<HeartLoader :color="'#be97e8'" duration="5s" />
32+
<HourglassLoader :color="'#be97e8'" duration="5s" />
33+
<RingLoader :color="'#be97e8'" duration="5s" />
34+
<RippleLoader :color="'#be97e8'" duration="5s" />
35+
<RollerLoader :color="'#be97e8'" duration="5s" />
36+
<SpinnerLoader :color="'#be97e8'" duration="5s" />
37+
<OrbitalsLoader :color="'#be97e8'" duration="10s" />
38+
</div>
39+
</div>
40+
<div id="app">
41+
<h2 style="text-align: center;">Color Property</h2>
42+
<div class="block">
43+
<CircleLoader :color="'#54f1d2'" />
44+
<CircleLoader :color="'#be97e8'" />
45+
<CircleLoader />
46+
</div>
47+
<div class="block">
48+
<DefaultLoader :color="'#54f1d2'" />
49+
<DefaultLoader :color="'#be97e8'" />
50+
<DefaultLoader />
51+
</div>
52+
<div class="block">
53+
<DualRingLoader :color="'#54f1d2'" />
54+
<DualRingLoader :color="'#be97e8'" />
55+
<DualRingLoader />
56+
</div>
57+
<div class="block">
58+
<EllipsisLoader :color="'#54f1d2'" />
59+
<EllipsisLoader :color="'#be97e8'" />
60+
<EllipsisLoader />
61+
</div>
62+
<div class="block">
63+
<FacebookLoader :color="'#54f1d2'" />
64+
<FacebookLoader :color="'#be97e8'" />
65+
<FacebookLoader />
66+
</div>
67+
<div class="block">
68+
<GridLoader :color="'#54f1d2'" />
69+
<GridLoader :color="'#be97e8'" />
70+
<GridLoader />
71+
</div>
72+
<div class="block">
73+
<HeartLoader :color="'#54f1d2'" />
74+
<HeartLoader :color="'#be97e8'" />
75+
<HeartLoader />
76+
</div>
77+
<div class="block">
78+
<HourglassLoader :color="'#54f1d2'" />
79+
<HourglassLoader :color="'#be97e8'" />
80+
<HourglassLoader />
81+
</div>
82+
<div class="block">
83+
<RingLoader :color="'#54f1d2'" />
84+
<RingLoader :color="'#be97e8'" />
85+
<RingLoader />
86+
</div>
87+
<div class="block">
88+
<RippleLoader :color="'#54f1d2'" />
89+
<RippleLoader :color="'#be97e8'" />
90+
<RippleLoader />
91+
</div>
92+
<div class="block">
93+
<RollerLoader :color="'#54f1d2'" />
94+
<RollerLoader :color="'#be97e8'" />
95+
<RollerLoader />
96+
</div>
97+
<div class="block">
98+
<SpinnerLoader :color="'#54f1d2'" />
99+
<SpinnerLoader :color="'#be97e8'" />
100+
<SpinnerLoader />
101+
</div>
102+
<div class="block">
103+
<OrbitalsLoader :color="'#54f1d2'" />
104+
<OrbitalsLoader :color="'#be97e8'" />
105+
<OrbitalsLoader />
106+
</div>
19107
<div style="clear: both"></div>
20108
</div>
21-
22-
</div>
23-
<div>
24-
<h2>Animation Duration Property</h2>
25-
<div class="normal-spinners">
26-
<CircleLoader :color="'#be97e8'" duration="5s" />
27-
<DefaultLoader :color="'#be97e8'" duration="5s" />
28-
<DualRingLoader :color="'#be97e8'" duration="5s" />
29-
<!-- <EllipsisLoader :color="'#be97e8'" duration="1s" /> -->
30-
<FacebookLoader :color="'#be97e8'" duration="5s" />
31-
<GridLoader :color="'#be97e8'" duration="5s" />
32-
<HeartLoader :color="'#be97e8'" duration="5s" />
33-
<HourglassLoader :color="'#be97e8'" duration="5s" />
34-
<RingLoader :color="'#be97e8'" duration="5s" />
35-
<RippleLoader :color="'#be97e8'" duration="5s" />
36-
<RollerLoader :color="'#be97e8'" duration="5s" />
37-
<SpinnerLoader :color="'#be97e8'" duration="5s" />
38-
<OrbitalsLoader :color="'#be97e8'" duration="10s" />
39-
</div>
40-
</div>
41-
<div id="app">
42-
<h2 style="text-align: center;">Color Property</h2>
43-
<div class="block">
44-
<CircleLoader :color="'#54f1d2'" />
45-
<CircleLoader :color="'#be97e8'" />
46-
<CircleLoader />
47-
</div>
48-
<div class="block">
49-
<DefaultLoader :color="'#54f1d2'" />
50-
<DefaultLoader :color="'#be97e8'" />
51-
<DefaultLoader />
52-
</div>
53-
<div class="block">
54-
<DualRingLoader :color="'#54f1d2'" />
55-
<DualRingLoader :color="'#be97e8'" />
56-
<DualRingLoader />
57-
</div>
58-
<div class="block">
59-
<EllipsisLoader :color="'#54f1d2'" />
60-
<EllipsisLoader :color="'#be97e8'" />
61-
<EllipsisLoader/>
62-
</div>
63-
<div class="block">
64-
<FacebookLoader :color="'#54f1d2'" />
65-
<FacebookLoader :color="'#be97e8'" />
66-
<FacebookLoader />
67-
</div>
68-
<div class="block">
69-
<GridLoader :color="'#54f1d2'" />
70-
<GridLoader :color="'#be97e8'" />
71-
<GridLoader />
72-
</div>
73-
<div class="block">
74-
<HeartLoader :color="'#54f1d2'" />
75-
<HeartLoader :color="'#be97e8'" />
76-
<HeartLoader />
77-
</div>
78-
<div class="block">
79-
<HourglassLoader :color="'#54f1d2'" />
80-
<HourglassLoader :color="'#be97e8'" />
81-
<HourglassLoader />
82-
</div>
83-
<div class="block">
84-
<RingLoader :color="'#54f1d2'" />
85-
<RingLoader :color="'#be97e8'" />
86-
<RingLoader />
87-
</div>
88-
<div class="block">
89-
<RippleLoader :color="'#54f1d2'" />
90-
<RippleLoader :color="'#be97e8'" />
91-
<RippleLoader />
92-
</div>
93-
<div class="block">
94-
<RollerLoader :color="'#54f1d2'" />
95-
<RollerLoader :color="'#be97e8'" />
96-
<RollerLoader />
97-
</div>
98-
<div class="block">
99-
<SpinnerLoader :color="'#54f1d2'" />
100-
<SpinnerLoader :color="'#be97e8'" />
101-
<SpinnerLoader />
102-
</div>
103-
<div class="block">
104-
<OrbitalsLoader :color="'#54f1d2'" />
105-
<OrbitalsLoader :color="'#be97e8'" />
106-
<OrbitalsLoader />
107-
</div>
108-
<div style="clear: both"></div>
109-
</div>
110-
<div id="app">
111-
<h2 style="text-align: center;">Size Property</h2>
112-
<div class="block">
113-
<CircleLoader :color="'#be97e8'" />
114-
<CircleLoader :color="'#be97e8'" :size="32" />
115-
<CircleLoader :color="'#be97e8'" :size="16" />
116-
</div>
117-
<div class="block">
118-
<DefaultLoader :color="'#be97e8'" />
119-
<DefaultLoader :color="'#be97e8'" :size="32" />
120-
<DefaultLoader :color="'#be97e8'" :size="16" />
121-
</div>
122-
<div class="block">
123-
<DualRingLoader :color="'#be97e8'" />
124-
<DualRingLoader :color="'#be97e8'" :size="32" />
125-
<DualRingLoader :color="'#be97e8'" :size="16" />
126-
</div>
127-
<div class="block">
128-
<FacebookLoader :color="'#be97e8'" />
129-
<FacebookLoader :color="'#be97e8'" :size="32" />
130-
<FacebookLoader :color="'#be97e8'" :size="16" />
131-
</div>
132-
<div class="block">
133-
<GridLoader :color="'#be97e8'" />
134-
<GridLoader :color="'#be97e8'" :size="32" />
135-
<GridLoader :color="'#be97e8'" :size="16" />
136-
</div>
137-
<div class="block">
138-
<HeartLoader :color="'#be97e8'" />
139-
<HeartLoader :color="'#be97e8'" :size="32" />
140-
<HeartLoader :color="'#be97e8'" :size="16" />
141-
</div>
142-
<div class="block">
143-
<HourglassLoader :color="'#be97e8'" />
144-
<HourglassLoader :color="'#be97e8'" :size="32" />
145-
<HourglassLoader :color="'#be97e8'" :size="16" />
146-
</div>
147-
<div class="block">
148-
<RingLoader :color="'#be97e8'" />
149-
<RingLoader :color="'#be97e8'" :size="32" />
150-
<RingLoader :color="'#be97e8'" :size="16" />
151-
</div>
152-
<div class="block">
153-
<RippleLoader :color="'#be97e8'" />
154-
<RippleLoader :color="'#be97e8'" :size="32" />
155-
<RippleLoader :color="'#be97e8'" :size="16" />
156-
</div>
157-
<div class="block">
158-
<RollerLoader :color="'#be97e8'" />
159-
<RollerLoader :color="'#be97e8'" :size="32" />
160-
<RollerLoader :color="'#be97e8'" :size="16" />
161-
</div>
162-
<div class="block">
163-
<SpinnerLoader :color="'#be97e8'" />
164-
<SpinnerLoader :color="'#be97e8'" :size="32" />
165-
<SpinnerLoader :color="'#be97e8'" :size="16" />
166-
</div>
167-
<div class="block">
168-
<OrbitalsLoader :color="'#be97e8'" />
169-
<OrbitalsLoader :color="'#be97e8'" :size="32" />
170-
<OrbitalsLoader :color="'#be97e8'" :size="16" />
109+
<div id="app">
110+
<h2 style="text-align: center;">Size Property</h2>
111+
<div class="block">
112+
<CircleLoader :color="'#be97e8'" />
113+
<CircleLoader :color="'#be97e8'" :size="32" />
114+
<CircleLoader :color="'#be97e8'" :size="16" />
115+
</div>
116+
<div class="block">
117+
<DefaultLoader :color="'#be97e8'" />
118+
<DefaultLoader :color="'#be97e8'" :size="32" />
119+
<DefaultLoader :color="'#be97e8'" :size="16" />
120+
</div>
121+
<div class="block">
122+
<DualRingLoader :color="'#be97e8'" />
123+
<DualRingLoader :color="'#be97e8'" :size="32" />
124+
<DualRingLoader :color="'#be97e8'" :size="16" />
125+
</div>
126+
<div class="block">
127+
<FacebookLoader :color="'#be97e8'" />
128+
<FacebookLoader :color="'#be97e8'" :size="32" />
129+
<FacebookLoader :color="'#be97e8'" :size="16" />
130+
</div>
131+
<div class="block">
132+
<GridLoader :color="'#be97e8'" />
133+
<GridLoader :color="'#be97e8'" :size="32" />
134+
<GridLoader :color="'#be97e8'" :size="16" />
135+
</div>
136+
<div class="block">
137+
<HeartLoader :color="'#be97e8'" />
138+
<HeartLoader :color="'#be97e8'" :size="32" />
139+
<HeartLoader :color="'#be97e8'" :size="16" />
140+
</div>
141+
<div class="block">
142+
<HourglassLoader :color="'#be97e8'" />
143+
<HourglassLoader :color="'#be97e8'" :size="32" />
144+
<HourglassLoader :color="'#be97e8'" :size="16" />
145+
</div>
146+
<div class="block">
147+
<RingLoader :color="'#be97e8'" />
148+
<RingLoader :color="'#be97e8'" :size="32" />
149+
<RingLoader :color="'#be97e8'" :size="16" />
150+
</div>
151+
<div class="block">
152+
<RippleLoader :color="'#be97e8'" />
153+
<RippleLoader :color="'#be97e8'" :size="32" />
154+
<RippleLoader :color="'#be97e8'" :size="16" />
155+
</div>
156+
<div class="block">
157+
<RollerLoader :color="'#be97e8'" />
158+
<RollerLoader :color="'#be97e8'" :size="32" />
159+
<RollerLoader :color="'#be97e8'" :size="16" />
160+
</div>
161+
<div class="block">
162+
<SpinnerLoader :color="'#be97e8'" />
163+
<SpinnerLoader :color="'#be97e8'" :size="32" />
164+
<SpinnerLoader :color="'#be97e8'" :size="16" />
165+
</div>
166+
<div class="block">
167+
<OrbitalsLoader :color="'#be97e8'" />
168+
<OrbitalsLoader :color="'#be97e8'" :size="32" />
169+
<OrbitalsLoader :color="'#be97e8'" :size="16" />
170+
</div>
171+
<div style="clear: both"></div>
171172
</div>
172-
<div style="clear: both"></div>
173173
</div>
174-
</div>
175174
</template>
176175

177176
<script>
@@ -222,7 +221,8 @@ export default {
222221
display: flex;
223222
justify-content: center;
224223
}
225-
h1, h2 {
224+
h1,
225+
h2 {
226226
width: 100%;
227227
text-align: center;
228228
}

‎src/components/CircleLoader.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default {
2323
duration: {
2424
type: String,
2525
default: '2.4s',
26-
validator: validateDuration
26+
validator: validateDuration,
2727
},
2828
},
2929
data() {

0 commit comments

Comments
 (0)