1 | @import (reference) './imports/global';
|
2 |
|
3 | @aui-progress-height: 6px;
|
4 | @aui-progress-indicator-border-radius: @aui-border-radius-small;
|
5 |
|
6 | aui-progressbar {
|
7 | display: block;
|
8 | }
|
9 |
|
10 | .aui-progress-indicator {
|
11 | background: var(--aui-progressbar-track-color);
|
12 | border-radius: @aui-progress-indicator-border-radius;
|
13 | height: @aui-progress-height;
|
14 | overflow: hidden;
|
15 | position: relative;
|
16 | width: 100%;
|
17 | }
|
18 |
|
19 | .aui-progress-indicator-value {
|
20 | animation: progressSlide 5s infinite ease-in-out;
|
21 | border-radius: @aui-progress-indicator-border-radius;
|
22 | display: block;
|
23 | height: @aui-progress-height;
|
24 | #aui.transition(none);
|
25 | position: absolute;
|
26 | width: 10%;
|
27 | background: var(--aui-progressbar-color);
|
28 | }
|
29 |
|
30 | @keyframes progressSlide {
|
31 | 0% { left: 0%; }
|
32 | 50% { left: 90%; }
|
33 | 100% { left: 0%; }
|
34 | }
|
35 |
|
36 | .aui-progress-indicator[data-value] .aui-progress-indicator-value {
|
37 | animation: none;
|
38 | left: 0;
|
39 | background: var(--aui-progressbar-color);
|
40 | border-radius: @aui-progress-indicator-border-radius;
|
41 | #aui.transition(width 0.5s);
|
42 | }
|
43 |
|
44 | .aui-progress-indicator-static[data-value] .aui-progress-indicator-value {
|
45 | animation: none;
|
46 | left: 0;
|
47 | #aui.transition(none);
|
48 | }
|