forked from olton/metroui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprogress.less
More file actions
115 lines (100 loc) · 2.85 KB
/
Copy pathprogress.less
File metadata and controls
115 lines (100 loc) · 2.85 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
@import (once) "../../include/vars";
@import (once) "../../include/mixins";
:root {
--progress-bar-height: 12px;
--progress-bar-height-ani: -24px;
--progress-bar-radius: 0;
--progress-bar-back-color: #eeeeee;
--progress-bar-color: #60A917;
--progress-bar-buffer-color: #CE352C;
--progress-bar-line-color: #b3d4fc;
--progress-bar-line-back-color: #004D6F;
--progress-bar-load-color: radial-gradient(#a9c0e9 0%, #a9c0e9 16%, transparent 42%);
--progress-bar-value-color: #191919;
}
.dark-side {
--progress-bar-back-color: #363942;
--progress-bar-bar-color: #60A917;
--progress-bar-buffer-color: #CE352C;
--progress-bar-line-color: #b3d4fc;
--progress-bar-line-back-color: #004D6F;
--progress-bar-load-color: radial-gradient(#a9c0e9 0%, #a9c0e9 16%, transparent 42%);
--progress-bar-value-color: #ffffff;
}
.progress {
display: block;
position: relative;
width: 100%;
height: var(--progress-bar-height);
background-color: var(--progress-bar-back-color);
overflow: hidden;
border-radius: var(--progress-bar-radius);
&.with-load {
background: transparent;
}
}
.progress {
.bar, .buffer, .load {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
.load {
width: 100%;
animation: progress-loading 3s infinite linear;
background: var(--progress-bar-load-color);
background-size: var(--progress-bar-height) var(--progress-bar-height);
z-index: 1;
margin-top: -1px;
}
.buffer {
z-index: 2;
background-color: var(--progress-bar-buffer-color);
}
.bar {
z-index: 3;
background: var(--progress-bar-color);
}
&.line {
background-color: var(--progress-bar-line-color);
display: flex;
&::before {
height: 100%;
width: 100%;
background-color: var(--progress-bar-line-back-color);
content: '';
animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
}
.value {
display: block;
float: left;
position: absolute;
z-index: 5;
font-size: 11px;
top: 50%;
transform: translateY(-50%);
margin-left: 4px;
}
.value.centered {
left: 50%;
transform: translate3d(-50%,-50%,0);
}
}
.progress {
&.small {
--progress-bar-height: 6px;
}
}
@keyframes progress-loading {
0% { opacity: 1; background-position: 0 var(--progress-bar-height-ani); }
50% { opacity: 0;}
100% { opacity: 1; background-position: -200px var(--progress-bar-height-ani);}
}
@keyframes running-progress {
0% { margin-left: 0; margin-right: 100%; }
50% { margin-left: 25%; margin-right: 0; }
100% { margin-left: 100%; margin-right: 0; }
}