Skip to content

Commit eb8d2c0

Browse files
nguyenvanduocitnguyenvanduocit
committed
add new icon
1 parent 7d01769 commit eb8d2c0

File tree

12 files changed

+845
-12
lines changed

12 files changed

+845
-12
lines changed

‎src/App.vue

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
<script>
1616
import RotateSquare from './components/RotateSquare'
1717
import RotateSquare2 from './components/RotateSquare2'
18+
import RotateSquare3 from './components/RotateSquare3'
19+
import RotateSquare4 from './components/RotateSquare4'
1820
import DoubleBounce from './components/DoubleBounce'
1921
import Stretch from './components/Stretch'
2022
import Cube from './components/Cube'
@@ -33,11 +35,19 @@ import Gauge from './components/Gauge'
3335
import Origami from './components/Origami'
3436
import Hexagon from './components/Hexagon'
3537
import Socket from './components/Socket'
38+
import HourGlass from './components/HourGlass'
39+
import Pencil from './components/Pencil'
40+
import Jawn from './components/Jawn'
41+
import LetterCube from './components/LetterCube'
42+
import PingPong from './components/PingPong'
43+
import Diamond from './components/Diamond'
3644
export default {
3745
name: 'app',
3846
components: {
3947
RotateSquare,
4048
RotateSquare2,
49+
RotateSquare3,
50+
RotateSquare4,
4151
DoubleBounce,
4252
Stretch,
4353
Cube,
@@ -55,14 +65,22 @@ export default {
5565
Gauge,
5666
Hexagon,
5767
Socket,
58-
Origami
68+
Origami,
69+
HourGlass,
70+
Pencil,
71+
Jawn,
72+
LetterCube,
73+
PingPong,
74+
Diamond
5975
},
6076
data () {
6177
return {
6278
size: '50px',
6379
spinners: [
6480
'RotateSquare',
6581
'RotateSquare2',
82+
'RotateSquare3',
83+
'RotateSquare4',
6684
'DoubleBounce',
6785
'Stretch',
6886
'Cube',
@@ -80,7 +98,13 @@ export default {
8098
'Gauge',
8199
'Origami',
82100
'Hexagon',
83-
'Socket'
101+
'Socket',
102+
'HourGlass',
103+
'Pencil',
104+
'Jawn',
105+
'LetterCube',
106+
'PingPong',
107+
'Diamond'
84108
]
85109
}
86110
}

‎src/components/Diamond.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<span v-bind:style="styles" class="spinner spinner--rotate-diamond">
3+
<div v-bind:style="diamondStyle" class='diamond'></div>
4+
<div v-bind:style="diamondStyle" class='diamond'></div>
5+
<div v-bind:style="diamondStyle" class='diamond'></div>
6+
</span>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
size: {
13+
default: '40px'
14+
},
15+
color: {
16+
default: '#41b883'
17+
}
18+
},
19+
computed: {
20+
diamondStyle () {
21+
let size = parseInt(this.size)
22+
return {
23+
width: size / 4 + 'px',
24+
height: size / 4 + 'px'
25+
}
26+
},
27+
styles () {
28+
let size = parseInt(this.size)
29+
return {
30+
width: this.size,
31+
height: size / 4 + 'px'
32+
}
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style lang="scss" scoped>
39+
$base: #1C78C5; $accent: #41b883;
40+
$duration: 1500ms; $timing: linear;
41+
42+
.spinner {
43+
position: relative;
44+
.diamond {
45+
position: absolute;
46+
left: 0;
47+
top: 0;
48+
border-radius: 2px;
49+
background: $accent;
50+
transform: translateX(-50%) rotate(45deg) scale(0);
51+
animation: diamonds $duration $timing infinite;
52+
@for $i from 1 through 4 {
53+
&:nth-child(#{$i}) {
54+
animation-delay: -($duration / 1.5) * $i;
55+
}
56+
}
57+
}
58+
}
59+
@keyframes diamonds {
60+
50% {
61+
left: 50%;
62+
transform: translateX(-50%) rotate(45deg) scale(1);
63+
}
64+
100% {
65+
left: 100%;
66+
transform: translateX(-50%) rotate(45deg) scale(0);
67+
}
68+
}
69+
</style>

‎src/components/Google.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ export default {
2626
text-indent: -9999px;
2727
display: inline-block;
2828
background: #f86;
29-
border-radius: 24px;
29+
border-radius: 50%;
3030
transform: rotateZ(90deg);
3131
transform-origin: 50% 50%;
3232
animation: plus-loader-background 3s infinite ease-in-out;
3333
}
3434
.spinner::after {
3535
background: #f86;
36-
border-radius: 24px 0 0 24px;
36+
border-radius: 50% 0 0 50%;
3737
content: '';
3838
position: absolute;
3939
right: 50%;
@@ -45,7 +45,7 @@ export default {
4545
}
4646
.spinner::before {
4747
background: #fc6;
48-
border-radius: 24px 0 0 24px;
48+
border-radius: 50% 0 0 50%;
4949
content: '';
5050
position: absolute;
5151
right: 50%;
@@ -190,4 +190,4 @@ export default {
190190
animation-timing-function: step-start;
191191
}
192192
}
193-
</style>
193+
</style>

‎src/components/Hexagon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default {
5757
height: 164px;
5858
display: block;
5959
position: absolute;
60-
border: 2px solid #41b883;
60+
border: 7px solid #41b883;
6161
border-radius: 50%;
6262
top: -2px;
6363
left: -2px;

‎src/components/HourGlass.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div v-bind:style="styles" class="spinner spinner--hour-glass">
3+
<div v-bind:style="innerStyles" class="spinner-inner">
4+
<svg class="hourglass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 206" preserveAspectRatio="none">
5+
<path class="middle" d="M120 0H0v206h120V0zM77.1 133.2C87.5 140.9 92 145 92 152.6V178H28v-25.4c0-7.6 4.5-11.7 14.9-19.4 6-4.5 13-9.6 17.1-17 4.1 7.4 11.1 12.6 17.1 17zM60 89.7c-4.1-7.3-11.1-12.5-17.1-17C32.5 65.1 28 61 28 53.4V28h64v25.4c0 7.6-4.5 11.7-14.9 19.4-6 4.4-13 9.6-17.1 16.9z"/>
6+
<path class="outer" d="M93.7 95.3c10.5-7.7 26.3-19.4 26.3-41.9V0H0v53.4c0 22.5 15.8 34.2 26.3 41.9 3 2.2 7.9 5.8 9 7.7-1.1 1.9-6 5.5-9 7.7C15.8 118.4 0 130.1 0 152.6V206h120v-53.4c0-22.5-15.8-34.2-26.3-41.9-3-2.2-7.9-5.8-9-7.7 1.1-2 6-5.5 9-7.7zM70.6 103c0 18 35.4 21.8 35.4 49.6V192H14v-39.4c0-27.9 35.4-31.6 35.4-49.6S14 81.2 14 53.4V14h92v39.4C106 81.2 70.6 85 70.6 103z"/>
7+
</svg>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
size: {
16+
default: '40px'
17+
}
18+
},
19+
computed: {
20+
innerStyles () {
21+
let size = parseInt(this.size)
22+
let baseSize = 64
23+
let ratio = 1
24+
if (size > baseSize) {
25+
ratio = baseSize / size
26+
} else {
27+
ratio = size / baseSize
28+
}
29+
return {
30+
transform: 'scale(' + ratio + ')'
31+
}
32+
},
33+
styles () {
34+
return {
35+
width: this.size,
36+
height: this.size
37+
}
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style lang="scss" scoped>
44+
$bg: #fff;
45+
$fill:#41b883;
46+
.spinner{
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
}
51+
.hourglass{
52+
display:block;
53+
background:$bg;
54+
width:32px;
55+
height:64px;
56+
box-shadow:
57+
inset $bg 0 0 0 0,
58+
inset $fill 0 32px 0 0,
59+
inset $bg 0 0 64px 0;
60+
animation:hourglass 1s linear infinite;
61+
}
62+
63+
.outer{
64+
fill:$fill;
65+
}
66+
67+
.middle{
68+
fill:$bg;
69+
}
70+
71+
@keyframes hourglass{
72+
0%{
73+
transform:rotate(0deg);
74+
box-shadow:
75+
inset $bg 0 0 0 0,
76+
inset $fill 0 32px 0 0,
77+
inset $bg 0 64px 0 0,
78+
inset $fill 0 64px 0 0;
79+
}
80+
80%{
81+
transform:rotate(0deg);
82+
box-shadow:
83+
inset $bg 0 32px 0 0,
84+
inset $fill 0 32px 0 0,
85+
inset $bg 0 32px 0 0,
86+
inset $fill 0 64px 0 0;
87+
}
88+
100%{
89+
transform:rotate(180deg);
90+
box-shadow:
91+
inset $bg 0 32px 0 0,
92+
inset $fill 0 32px 0 0,
93+
inset $bg 0 32px 0 0,
94+
inset $fill 0 64px 0 0;
95+
}
96+
}
97+
</style>

‎src/components/Jawn.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div class="spinner spinner--jawn">
3+
<div :style="styles" class="spinner-inner">
4+
<div :style="innerStyles" class="jawn"></div>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
size: {
13+
default: '40px'
14+
},
15+
color: {
16+
default: '#41b883'
17+
}
18+
},
19+
computed: {
20+
innerStyles () {
21+
let size = parseInt(this.size)
22+
return {
23+
transform: 'scale(' + (size / 70) + ')'
24+
}
25+
},
26+
styles () {
27+
return {
28+
width: this.size,
29+
height: this.size
30+
}
31+
}
32+
}
33+
}
34+
</script>
35+
36+
<style lang="scss" scoped>
37+
$blue: #41b883;
38+
.spinner-inner{
39+
width: 70px;
40+
height: 70px;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
}
45+
.jawn {
46+
position: relative;
47+
background-color: #F8E71C;
48+
width: 15px;
49+
height: 15px;
50+
margin: 0 auto;
51+
border-radius: 50%;
52+
53+
&:after, &:before {
54+
content: "";
55+
position: absolute;
56+
width: 6px;
57+
height: 6px;
58+
border-radius: 50%;
59+
}
60+
61+
&:after {
62+
left: -10px;
63+
top: -5px;
64+
background-color: #f7484e;
65+
transform-origin: 15px 10px;
66+
animation: jawn-axis 1s linear infinite;
67+
}
68+
&:before {
69+
left: -25px;
70+
top: -15px;
71+
background-color: $blue;
72+
transform-origin: 30px 20px;
73+
animation: jawn-axis 2s linear infinite;
74+
}
75+
}
76+
77+
@keyframes jawn-axis {
78+
0% {
79+
transform: rotateZ(0deg) translate3d(0,0,0);
80+
}
81+
100% {
82+
transform: rotateZ(360deg) translate3d(0,0,0);
83+
}
84+
}
85+
</style>

0 commit comments

Comments
 (0)