Skip to content

Commit 9e7fd9c

Browse files
JoshK2JoshK2
committed
added 12 loader
1 parent 98ddc22 commit 9e7fd9c

20 files changed

+1215
-78
lines changed

‎.bitmap‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
2+
3+
{
4+
"version": "14.2.5"
5+
}

‎.prettierrc.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"trailingComma": "es5",
3+
"tabWidth": 4,
4+
"semi": false,
5+
"singleQuote": true,
6+
"printWidth": 120
7+
}

‎package-lock.json‎

Lines changed: 10 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
88
"build:lib": "",
9-
"lint": "vue-cli-service lint"
9+
"lint": "vue-cli-service lint",
10+
"format": "prettier --write \"src/**/*.vue\" \"src/**/*.js\""
1011
},
1112
"dependencies": {
1213
"core-js": "^2.6.5",
@@ -19,6 +20,7 @@
1920
"babel-eslint": "^10.0.1",
2021
"eslint": "^5.16.0",
2122
"eslint-plugin-vue": "^5.0.0",
23+
"prettier": "^1.18.2",
2224
"vue-template-compiler": "^2.6.10"
2325
},
2426
"eslintConfig": {
@@ -43,5 +45,12 @@
4345
"browserslist": [
4446
"> 1%",
4547
"last 2 versions"
46-
]
48+
],
49+
"bit": {
50+
"env": {
51+
"compiler": "bit.envs/bundlers/[email protected]"
52+
},
53+
"componentsDefaultDirectory": "components/{name}",
54+
"packageManager": "npm"
55+
}
4756
}

‎src/App.vue‎

Lines changed: 106 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,119 @@
11
<template>
2-
<div id="app">
3-
<CircleLoader :loading="false" />
4-
<CircleLoader :loading="true" />
5-
<CircleLoader color="yellow" />
6-
</div>
2+
<div id="app">
3+
<h2>Color Property</h2>
4+
<div class="block">
5+
<CircleLoader :color="'black'" />
6+
<CircleLoader :color="'#de3541'" />
7+
<CircleLoader />
8+
</div>
9+
<div class="block">
10+
<DefaultLoader :color="'black'" />
11+
<DefaultLoader :color="'#de3541'" />
12+
<DefaultLoader />
13+
</div>
14+
<div class="block">
15+
<DualRingLoader :color="'black'" />
16+
<DualRingLoader :color="'#de3541'" />
17+
<DualRingLoader />
18+
</div>
19+
<div class="block">
20+
<EllipsisLoader :color="'black'" />
21+
<EllipsisLoader :color="'#de3541'" />
22+
<EllipsisLoader />
23+
</div>
24+
<div class="block">
25+
<FacebookLoader :color="'black'" />
26+
<FacebookLoader :color="'#de3541'" />
27+
<FacebookLoader />
28+
</div>
29+
<div class="block">
30+
<GridLoader :color="'black'" />
31+
<GridLoader :color="'#de3541'" />
32+
<GridLoader />
33+
</div>
34+
<div class="block">
35+
<HeartLoader :color="'black'" />
36+
<HeartLoader :color="'#de3541'" />
37+
<HeartLoader />
38+
</div>
39+
<div class="block">
40+
<HourglassLoader :color="'black'" />
41+
<HourglassLoader :color="'#de3541'" />
42+
<HourglassLoader />
43+
</div>
44+
<div class="block">
45+
<RingLoader :color="'black'" />
46+
<RingLoader :color="'#de3541'" />
47+
<RingLoader />
48+
</div>
49+
<div class="block">
50+
<RippleLoader :color="'black'" />
51+
<RippleLoader :color="'#de3541'" />
52+
<RippleLoader />
53+
</div>
54+
<div class="block">
55+
<RollerLoader :color="'black'" />
56+
<RollerLoader :color="'#de3541'" />
57+
<RollerLoader />
58+
</div>
59+
<div class="block">
60+
<SpinnerLoader :color="'black'" />
61+
<SpinnerLoader :color="'#de3541'" />
62+
<SpinnerLoader />
63+
</div>
64+
<div style="clear: both"></div>
65+
</div>
766
</template>
867

968
<script>
10-
import CircleLoader from './components/circle-loader.vue';
69+
import CircleLoader from './components/CircleLoader.vue'
70+
import DefaultLoader from './components/DefaultLoader.vue'
71+
import DualRingLoader from './components/DualRingLoader.vue'
72+
import EllipsisLoader from './components/EllipsisLoader.vue'
73+
import FacebookLoader from './components/FacebookLoader'
74+
import GridLoader from './components/GridLoader.vue'
75+
import HeartLoader from './components/HeartLoader.vue'
76+
import HourglassLoader from './components/HourglassLoader.vue'
77+
import RingLoader from './components/RingLoader.vue'
78+
import RippleLoader from './components/RippleLoader.vue'
79+
import RollerLoader from './components/RollerLoader.vue'
80+
import SpinnerLoader from './components/SpinnerLoader.vue'
1181
1282
export default {
13-
name: 'app',
14-
components: {
15-
CircleLoader
16-
}
83+
name: 'app',
84+
components: {
85+
CircleLoader,
86+
DefaultLoader,
87+
DualRingLoader,
88+
EllipsisLoader,
89+
FacebookLoader,
90+
GridLoader,
91+
HeartLoader,
92+
HourglassLoader,
93+
RingLoader,
94+
RippleLoader,
95+
RollerLoader,
96+
SpinnerLoader,
97+
},
1798
}
1899
</script>
19100

20101
<style>
21102
#app {
22-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
23-
-webkit-font-smoothing: antialiased;
24-
-moz-osx-font-smoothing: grayscale;
25-
text-align: center;
26-
color: #2c3e50;
27-
margin-top: 60px;
103+
text-align: center;
104+
width: 564px;
105+
margin: auto;
106+
}
107+
.block {
108+
float: left;
109+
border: 1px solid #ccc;
110+
border-radius: 3px;
111+
width: 240px;
112+
height: 84px;
113+
margin: 10px;
114+
padding: 10px;
115+
}
116+
.loader {
117+
margin: 20px;
28118
}
29119
</style>

‎src/components/CircleLoader.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div v-show="loading" class="lds-circle" v-bind:style="[spinnerStyle]"></div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'CircleLoader',
8+
props: {
9+
loading: {
10+
type: Boolean,
11+
default: true,
12+
},
13+
color: {
14+
type: String,
15+
default: '#7f58af',
16+
},
17+
},
18+
data() {
19+
return {
20+
spinnerStyle: {
21+
background: this.color,
22+
},
23+
}
24+
},
25+
}
26+
</script>
27+
28+
<style>
29+
.lds-circle {
30+
display: inline-block;
31+
width: 64px;
32+
height: 64px;
33+
margin: 8px;
34+
border-radius: 50%;
35+
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
36+
}
37+
@keyframes lds-circle {
38+
0%,
39+
100% {
40+
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
41+
}
42+
0% {
43+
transform: rotateY(0deg);
44+
}
45+
50% {
46+
transform: rotateY(1800deg);
47+
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
48+
}
49+
100% {
50+
transform: rotateY(3600deg);
51+
}
52+
}
53+
</style>

‎src/components/DefaultLoader.vue‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<div v-show="loading" class="lds-default">
3+
<div v-bind:style="[spinnerStyle]"></div>
4+
<div v-bind:style="[spinnerStyle]"></div>
5+
<div v-bind:style="[spinnerStyle]"></div>
6+
<div v-bind:style="[spinnerStyle]"></div>
7+
<div v-bind:style="[spinnerStyle]"></div>
8+
<div v-bind:style="[spinnerStyle]"></div>
9+
<div v-bind:style="[spinnerStyle]"></div>
10+
<div v-bind:style="[spinnerStyle]"></div>
11+
<div v-bind:style="[spinnerStyle]"></div>
12+
<div v-bind:style="[spinnerStyle]"></div>
13+
<div v-bind:style="[spinnerStyle]"></div>
14+
<div v-bind:style="[spinnerStyle]"></div>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'DefaultLoader',
21+
props: {
22+
loading: {
23+
type: Boolean,
24+
default: true,
25+
},
26+
color: {
27+
type: String,
28+
default: '#7f58af',
29+
},
30+
},
31+
data() {
32+
return {
33+
spinnerStyle: {
34+
background: this.color,
35+
},
36+
}
37+
},
38+
}
39+
</script>
40+
41+
<style>
42+
.lds-default {
43+
display: inline-block;
44+
position: relative;
45+
width: 80px;
46+
height: 80px;
47+
}
48+
.lds-default div {
49+
position: absolute;
50+
width: 6px;
51+
height: 6px;
52+
background: #fff;
53+
border-radius: 50%;
54+
animation: lds-default 1.2s linear infinite;
55+
}
56+
.lds-default div:nth-child(1) {
57+
animation-delay: 0s;
58+
top: 37px;
59+
left: 66px;
60+
}
61+
.lds-default div:nth-child(2) {
62+
animation-delay: -0.1s;
63+
top: 22px;
64+
left: 62px;
65+
}
66+
.lds-default div:nth-child(3) {
67+
animation-delay: -0.2s;
68+
top: 11px;
69+
left: 52px;
70+
}
71+
.lds-default div:nth-child(4) {
72+
animation-delay: -0.3s;
73+
top: 7px;
74+
left: 37px;
75+
}
76+
.lds-default div:nth-child(5) {
77+
animation-delay: -0.4s;
78+
top: 11px;
79+
left: 22px;
80+
}
81+
.lds-default div:nth-child(6) {
82+
animation-delay: -0.5s;
83+
top: 22px;
84+
left: 11px;
85+
}
86+
.lds-default div:nth-child(7) {
87+
animation-delay: -0.6s;
88+
top: 37px;
89+
left: 7px;
90+
}
91+
.lds-default div:nth-child(8) {
92+
animation-delay: -0.7s;
93+
top: 52px;
94+
left: 11px;
95+
}
96+
.lds-default div:nth-child(9) {
97+
animation-delay: -0.8s;
98+
top: 62px;
99+
left: 22px;
100+
}
101+
.lds-default div:nth-child(10) {
102+
animation-delay: -0.9s;
103+
top: 66px;
104+
left: 37px;
105+
}
106+
.lds-default div:nth-child(11) {
107+
animation-delay: -1s;
108+
top: 62px;
109+
left: 52px;
110+
}
111+
.lds-default div:nth-child(12) {
112+
animation-delay: -1.1s;
113+
top: 52px;
114+
left: 62px;
115+
}
116+
@keyframes lds-default {
117+
0%,
118+
20%,
119+
80%,
120+
100% {
121+
transform: scale(1);
122+
}
123+
50% {
124+
transform: scale(1.5);
125+
}
126+
}
127+
</style>

0 commit comments

Comments
 (0)