Skip to content

Commit 7d1564d

Browse files
nguyenvanduocitnguyenvanduocit
committed
update demo
1 parent 9eb0d24 commit 7d1564d

File tree

3 files changed

+53
-71
lines changed

3 files changed

+53
-71
lines changed

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, maximum-scale=10, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
56
<title>vue-loading-spinner</title>
67
</head>
78
<body>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-loading-spinner",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Loading spinner collection for Vuejs",
55
"author": "nguyenvanduoc (nguyenvanduocit@gmail.com)",
66
"scripts": {

‎src/App.vue

Lines changed: 51 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,12 @@
11
<template>
22
<div id="app">
3+
<div class="header">
4+
<h1 class="header--title">vue-loading-spinner v1.0.0</h1>
5+
</div>
36
<div class="spinner-list">
4-
<div class="spinner-container">
5-
<rotate-square :size="size"></rotate-square>
6-
</div>
7-
<div class="spinner-container">
8-
<rotate-square-2 :size="size"></rotate-square-2>
9-
</div>
10-
<div class="spinner-container">
11-
<double-bounce :size="size"></double-bounce>
12-
</div>
13-
<div class="spinner-container">
14-
<stretch :size="size"></stretch>
15-
</div>
16-
<div class="spinner-container">
17-
<cube :size="size"></cube>
18-
</div>
19-
<div class="spinner-container">
20-
<cube-grid :size="size"></cube-grid>
21-
</div>
22-
<div class="spinner-container">
23-
<cube-shadow :size="size"></cube-shadow>
24-
</div>
25-
<div class="spinner-container">
26-
<scale-out :size="size"></scale-out>
27-
</div>
28-
<div class="spinner-container">
29-
<circle-spin :size="size"></circle-spin>
30-
</div>
31-
<div class="spinner-container">
32-
<circle-spin-2 :size="size"></circle-spin-2>
33-
</div>
34-
<div class="spinner-container">
35-
<circle-spin-3 :size="size"></circle-spin-3>
36-
</div>
37-
<div class="spinner-container">
38-
<circle-spin-4 :size="size"></circle-spin-4>
39-
</div>
40-
<div class="spinner-container">
41-
<circle-spin-5 :size="size"></circle-spin-5>
42-
</div>
43-
<div class="spinner-container">
44-
<circle-spin-6 :size="size"></circle-spin-6>
45-
</div>
46-
<div class="spinner-container">
47-
<three-dots :size="size"></three-dots>
48-
</div>
49-
<div class="spinner-container">
50-
<google-spin :size="size"></google-spin>
51-
</div>
52-
<div class="spinner-container">
53-
<gauge :size="size"></gauge>
54-
</div>
55-
<div class="spinner-container">
56-
<origami :size="size"></origami>
57-
</div>
58-
<div class="spinner-container">
59-
<hexagon :size="size"></hexagon>
60-
</div>
61-
<div class="spinner-container">
62-
<socket :size="size"></socket>
7+
<div class="spinner-container" v-for="spinner in spinners">
8+
<component :is="spinner" :size="size"></component>
9+
<div class="name" v-text="spinner"></div>
6310
</div>
6411
</div>
6512
</div>
@@ -112,34 +59,68 @@ export default {
11259
},
11360
data () {
11461
return {
115-
size: '40px'
62+
size: '40px',
63+
spinners: [
64+
'RotateSquare',
65+
'RotateSquare2',
66+
'DoubleBounce',
67+
'Stretch',
68+
'Cube',
69+
'CubeGrid',
70+
'CubeShadow',
71+
'ScaleOut',
72+
'CircleSpin',
73+
'CircleSpin2',
74+
'CircleSpin3',
75+
'CircleSpin4',
76+
'CircleSpin5',
77+
'CircleSpin6',
78+
'ThreeDots',
79+
'GoogleSpin',
80+
'Gauge',
81+
'Origami',
82+
'Hexagon',
83+
'Socket'
84+
]
11685
}
11786
}
11887
}
11988
</script>
12089

12190
<style lang="scss" scoped>
122-
body{
123-
margin: 0;
124-
padding: 0;
125-
}
12691
#app {
127-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
128-
-webkit-font-smoothing: antialiased;
129-
-moz-osx-font-smoothing: grayscale;
92+
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
13093
text-align: center;
13194
color: #2c3e50;
95+
margin-bottom: 100px;
96+
margin-top: 50px;
97+
}
98+
.header{
99+
.header--title{
100+
color: #41b883;
101+
font-size: 35px;
102+
}
132103
}
133104
.spinner-list{
134-
overflow-x: hidden;
105+
display: flex;
106+
justify-content: center;
107+
align-items: center;
108+
flex-direction: row;
109+
flex-wrap: wrap;
135110
}
136111
.spinner-container{
137112
display: flex;
138113
justify-content: center;
139114
align-items: center;
140115
flex-direction: column;
141-
height: 250px;
142-
width: 100vw;
116+
min-height: 250px;
117+
min-width: 250px;
118+
width: 25%;
143119
overflow: hidden;
120+
.name{
121+
margin-top: 10px;
122+
color: #41b883;
123+
font-size: 20px;
124+
}
144125
}
145126
</style>

0 commit comments

Comments
 (0)