blob: b7967ec029e4b5c877cfb84ac929f2d70c153fd4 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<template>
<div
:style="styles"
class="spinner spinner--rotate-square-2" />
</template>
<script>
export default {
props: {
size: {
'type': String,
'default': '40px'
}
},
computed: {
styles() {
return {
width: this.size,
height: this.size,
display: 'inline-block'
};
}
}
};
</script>
<style lang="scss" scoped>
@import '../../styles/colors.scss';
.spinner {
position: relative;
* {
line-height: 0;
box-sizing: border-box;
}
&:before {
content: '';
width: 100%;
height: 20%;
min-width: 5px;
background: #000;
opacity: 0.1;
position: absolute;
bottom: 0%;
left: 0;
border-radius: 50%;
animation: rotate-square-2-shadow .5s linear infinite;
}
&:after {
content: '';
width: 100%;
height: 100%;
background: $basePink;
animation: rotate-square-2-animate .5s linear infinite;
position: absolute;
bottom:40%;
left: 0;
border-radius: 3px;
}
}
@keyframes rotate-square-2-animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(20%) rotate(22.5deg);
}
50% {
transform: translateY(40%) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 50%;
}
75% {
transform: translateY(20%) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes rotate-square-2-shadow {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
</style>
|