Skip to content

Commit 7b15d16

Browse files
JoshK2JoshK2
committed
update readme and locale demo
1 parent 14af3da commit 7b15d16

File tree

2 files changed

+76
-19
lines changed

2 files changed

+76
-19
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Component that accepts duration prop have a default duration in seconds.
3737
| Circle Spinner | `#7f58af` | `true` | `64` | `2.4s` |
3838
| Default Spinner | `#7f58af` | `true` | `80` | `1.2s` |
3939
| DualRing Spinner | `#7f58af` | `true` | `80` | `1.2s` |
40-
| Ellipsis Spinner | `#7f58af` | `true` | `80` | `1.2s` |
40+
| Ellipsis Spinner | `#7f58af` | `true` | | |
4141
| Facebook Spinner | `#7f58af` | `true` | `80` | `1.2s` |
4242
| Grid Spinner | `#7f58af` | `true` | `80` | `1.2s` |
4343
| Heart Spinner | `#7f58af` | `true` | `80` | `1.2s` |

‎src/App.vue‎

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,30 @@
33
<div>
44
<h1>Vue Spinners</h1>
55
<div class="normal-spinners">
6-
<CircleLoader :color="'#be97e8'" />
7-
<DefaultLoader :color="'#be97e8'" />
8-
<DualRingLoader :color="'#be97e8'" />
9-
<EllipsisLoader :color="'#be97e8'" />
10-
<FacebookLoader :color="'#be97e8'" />
11-
<GridLoader :color="'#be97e8'" />
12-
<HeartLoader :color="'#be97e8'" />
13-
<HourglassLoader :color="'#be97e8'" />
14-
<RingLoader :color="'#be97e8'" />
15-
<RippleLoader :color="'#be97e8'" />
16-
<RollerLoader :color="'#be97e8'" />
17-
<SpinnerLoader :color="'#be97e8'" />
18-
<OrbitalsLoader :color="'#be97e8'" />
19-
</div>
20-
<div style="clear: both"></div>
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+
2122
</div>
2223
<div>
2324
<h2>Animation Duration Property</h2>
2425
<div class="normal-spinners">
2526
<CircleLoader :color="'#be97e8'" duration="5s" />
2627
<DefaultLoader :color="'#be97e8'" duration="5s" />
2728
<DualRingLoader :color="'#be97e8'" duration="5s" />
28-
<EllipsisLoader :color="'#be97e8'" duration="1s" />
29+
<!-- <EllipsisLoader :color="'#be97e8'" duration="1s" /> -->
2930
<FacebookLoader :color="'#be97e8'" duration="5s" />
3031
<GridLoader :color="'#be97e8'" duration="5s" />
3132
<HeartLoader :color="'#be97e8'" duration="5s" />
@@ -113,6 +114,61 @@
113114
<CircleLoader :color="'#be97e8'" :size="32" />
114115
<CircleLoader :color="'#be97e8'" :size="16" />
115116
</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" />
171+
</div>
116172
<div style="clear: both"></div>
117173
</div>
118174
</div>
@@ -163,7 +219,8 @@ export default {
163219
justify-content: space-between;
164220
}
165221
.normal-spinners {
166-
text-align: center;
222+
display: flex;
223+
justify-content: center;
167224
}
168225
h1, h2 {
169226
width: 100%;
@@ -178,6 +235,6 @@ h1, h2 {
178235
padding: 10px;
179236
}
180237
.loader {
181-
margin: 20px;
238+
float: left;
182239
}
183240
</style>

0 commit comments

Comments
 (0)