Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d71cbee

Browse files
nguyenvanduocitnguyenvanduocit
committed
reorder items
1 parent aaae6ec commit d71cbee

File tree

2 files changed

+187
-43
lines changed

2 files changed

+187
-43
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, maximum-scale=10, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
66
<title>vue-loading-spinner v1.0</title>
7+
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
8+
<meta name="description" content="Just another collection of loading spinners with Vue.js" />
79
</head>
810
<body>
911
<div id="app"></div>

‎src/App.vue‎

Lines changed: 185 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@
33
<div class="header">
44
<h1 class="header--title">vue-loading-spinner v1.0</h1>
55
</div>
6+
<div class="intro">
7+
<p>Just another collection of loading spinners with Vue.js, alot of spinners</p>
8+
<a class="btn" href="https://github.com/nguyenvanduocit/vue-loading-spinner">Github</a>
9+
</div>
610
<div class="spinner-list">
711
<div class="spinner-container" v-for="spinner in spinners">
8-
<component :is="spinner" :size="size"></component>
9-
<div class="name" v-text="spinner"></div>
12+
<component :is="spinner.component" :size="size"></component>
13+
<div class="name" v-text="spinner.path"></div>
1014
</div>
1115
</div>
1216
</div>
@@ -99,45 +103,162 @@ export default {
99103
return {
100104
size: '60px',
101105
spinners: [
102-
'RotateSquare',
103-
'RotateSquare2',
104-
'RotateSquare3',
105-
'RotateSquare4',
106-
'RotateSquare5',
107-
'Cube',
108-
'CubeGrid',
109-
'CubeShadow',
110-
'Stretch',
111-
'CircleSpin2',
112-
'CircleSpin4',
113-
'CircleSpin',
114-
'CircleSpin9',
115-
'CircleSpin10',
116-
'DoubleBounce',
117-
'ScaleOut',
118-
'Jumper',
119-
'Wave',
120-
'CircleSpin3',
121-
'CircleSpin5',
122-
'CircleSpin6',
123-
'GoogleSpin',
124-
'CircleSpin7',
125-
'Jawn',
126-
'ThreeDots',
127-
'CircleSpin8',
128-
'Gauge',
129-
'Origami',
130-
'Hexagon',
131-
'Socket',
132-
'HourGlass',
133-
'Pencil',
134-
'LetterCube',
135-
'PingPong',
136-
'Diamond',
137-
'SpinLine',
138-
'Plane',
139-
'Mikepad',
140-
'Texture'
106+
{
107+
'component': 'RotateSquare',
108+
'path': 'RotateSquare'
109+
},
110+
{
111+
'component': 'RotateSquare2',
112+
'path': 'RotateSquare2'
113+
},
114+
{
115+
'component': 'RotateSquare3',
116+
'path': 'RotateSquare3'
117+
},
118+
{
119+
'component': 'RotateSquare4',
120+
'path': 'RotateSquare4'
121+
},
122+
{
123+
'component': 'RotateSquare5',
124+
'path': 'RotateSquare5'
125+
},
126+
{
127+
'component': 'CubeShadow',
128+
'path': 'CubeShadow'
129+
},
130+
{
131+
'component': 'Cube',
132+
'path': 'Cube'
133+
},
134+
{
135+
'component': 'CubeGrid',
136+
'path': 'CubeGrid'
137+
},
138+
{
139+
'component': 'DoubleBounce',
140+
'path': 'DoubleBounce'
141+
},
142+
{
143+
'component': 'Stretch',
144+
'path': 'Stretch'
145+
},
146+
{
147+
'component': 'ScaleOut',
148+
'path': 'ScaleOut'
149+
},
150+
{
151+
'component': 'Jumper',
152+
'path': 'Jumper'
153+
},
154+
{
155+
'component': 'Wave',
156+
'path': 'Wave'
157+
},
158+
{
159+
'component': 'CircleSpin',
160+
'path': 'Circle'
161+
},
162+
{
163+
'component': 'CircleSpin2',
164+
'path': 'Circle2'
165+
},
166+
{
167+
'component': 'CircleSpin3',
168+
'path': 'Circle3'
169+
},
170+
{
171+
'component': 'CircleSpin4',
172+
'path': 'Circle4'
173+
},
174+
{
175+
'component': 'CircleSpin5',
176+
'path': 'Circle5'
177+
},
178+
{
179+
'component': 'CircleSpin6',
180+
'path': 'Circle6'
181+
},
182+
{
183+
'component': 'CircleSpin7',
184+
'path': 'Circle7'
185+
},
186+
{
187+
'component': 'CircleSpin8',
188+
'path': 'Circle8'
189+
},
190+
{
191+
'component': 'CircleSpin9',
192+
'path': 'Circle9'
193+
},
194+
{
195+
'component': 'CircleSpin10',
196+
'path': 'Circle10'
197+
},
198+
{
199+
'component': 'GoogleSpin',
200+
'path': 'GoogleSpin'
201+
},
202+
{
203+
'component': 'ThreeDots',
204+
'path': 'ThreeDots'
205+
},
206+
{
207+
'component': 'Gauge',
208+
'path': 'Gauge'
209+
},
210+
{
211+
'component': 'Origami',
212+
'path': 'Origami'
213+
},
214+
{
215+
'component': 'Hexagon',
216+
'path': 'Hexagon'
217+
},
218+
{
219+
'component': 'Socket',
220+
'path': 'Socket'
221+
},
222+
{
223+
'component': 'HourGlass',
224+
'path': 'HourGlass'
225+
},
226+
{
227+
'component': 'Pencil',
228+
'path': 'Pencil'
229+
},
230+
{
231+
'component': 'Jawn',
232+
'path': 'Jawn'
233+
},
234+
{
235+
'component': 'LetterCube',
236+
'path': 'LetterCube'
237+
},
238+
{
239+
'component': 'PingPong',
240+
'path': 'PingPong'
241+
},
242+
{
243+
'component': 'Diamond',
244+
'path': 'Diamond'
245+
},
246+
{
247+
'component': 'SpinLine',
248+
'path': 'SpinLine'
249+
},
250+
{
251+
'component': 'Plane',
252+
'path': 'Plane'
253+
},
254+
{
255+
'component': 'Mikepad',
256+
'path': 'Mikepad'
257+
},
258+
{
259+
'component': 'Texture',
260+
'path': 'Texture'
261+
}
141262
]
142263
}
143264
}
@@ -146,7 +267,7 @@ export default {
146267

147268
<style lang="scss" scoped>
148269
#app {
149-
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
270+
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
150271
text-align: center;
151272
color: #2c3e50;
152273
margin-bottom: 100px;
@@ -155,8 +276,29 @@ export default {
155276
.header{
156277
.header--title{
157278
color: #41b883;
158-
font-size: 35px;
279+
font-size: 48px;
159280
font-weight: normal;
281+
margin-top: 0;
282+
margin-bottom: 10px;
283+
}
284+
}
285+
.intro{
286+
color: #7f8c8d;
287+
margin-bottom: 50px;
288+
}
289+
.btn{
290+
margin-top: 20px;
291+
padding: 10px 30px;
292+
border-radius: 30px;
293+
display: inline-block;
294+
color: #fff;
295+
background-color: #4fc08d;
296+
transition: all 0.15s ease;
297+
box-sizing: border-box;
298+
text-transform: uppercase;
299+
text-decoration: none;
300+
&:hover{
301+
background-color: #57d69c;
160302
}
161303
}
162304
.spinner-list{

0 commit comments

Comments
 (0)