]>
Commit | Line | Data |
---|---|---|
1 | @import '_mixins'; | |
2 | // Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css | |
3 | ||
4 | /* Make clicks pass-through */ | |
5 | #loading-bar, | |
6 | #loading-bar-spinner { | |
7 | pointer-events: none; | |
8 | -webkit-pointer-events: none; | |
9 | -webkit-transition: 350ms linear all; | |
10 | -moz-transition: 350ms linear all; | |
11 | -o-transition: 350ms linear all; | |
12 | transition: 350ms linear all; | |
13 | color: var(--mainColor); | |
14 | } | |
15 | ||
16 | #loading-bar .bar { | |
17 | -webkit-transition: width 350ms; | |
18 | -moz-transition: width 350ms; | |
19 | -o-transition: width 350ms; | |
20 | transition: width 350ms; | |
21 | ||
22 | background: var(--mainColor); | |
23 | position: fixed; | |
24 | z-index: z(loadbar); | |
25 | top: 0; | |
26 | left: 0; | |
27 | width: 100%; | |
28 | height: 2px; | |
29 | border-bottom-right-radius: 1px; | |
30 | border-top-right-radius: 1px; | |
31 | } | |
32 | ||
33 | /* Fancy blur effect */ | |
34 | #loading-bar .peg { | |
35 | position: absolute; | |
36 | width: 70px; | |
37 | right: 0; | |
38 | top: 0; | |
39 | height: 2px; | |
40 | opacity: .45; | |
41 | -moz-box-shadow: 1px 0 6px 1px; | |
42 | -ms-box-shadow: 1px 0 6px 1px; | |
43 | -webkit-box-shadow: 1px 0 6px 1px; | |
44 | box-shadow: 1px 0 6px 1px; | |
45 | color: inherit; | |
46 | -moz-border-radius: 100%; | |
47 | -webkit-border-radius: 100%; | |
48 | border-radius: 100%; | |
49 | } | |
50 | ||
51 | #loading-bar-spinner { | |
52 | display: block; | |
53 | position: fixed; | |
54 | z-index: z(loadbar); | |
55 | top: 10px; | |
56 | left: 10px; | |
57 | } | |
58 | ||
59 | #loading-bar-spinner .spinner-icon { | |
60 | width: 14px; | |
61 | height: 14px; | |
62 | ||
63 | border: solid 2px transparent; | |
64 | border-top-color: inherit; | |
65 | border-left-color: inherit; | |
66 | border-radius: 50%; | |
67 | ||
68 | -webkit-animation: loading-bar-spinner 400ms linear infinite; | |
69 | -moz-animation: loading-bar-spinner 400ms linear infinite; | |
70 | -ms-animation: loading-bar-spinner 400ms linear infinite; | |
71 | -o-animation: loading-bar-spinner 400ms linear infinite; | |
72 | animation: loading-bar-spinner 400ms linear infinite; | |
73 | } | |
74 | ||
75 | @-webkit-keyframes loading-bar-spinner { | |
76 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } | |
77 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } | |
78 | } | |
79 | @-moz-keyframes loading-bar-spinner { | |
80 | 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } | |
81 | 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } | |
82 | } | |
83 | @-o-keyframes loading-bar-spinner { | |
84 | 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } | |
85 | 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } | |
86 | } | |
87 | @-ms-keyframes loading-bar-spinner { | |
88 | 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } | |
89 | 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } | |
90 | } | |
91 | @keyframes loading-bar-spinner { | |
92 | 0% { transform: rotate(0deg); } | |
93 | 100% { transform: rotate(360deg); } | |
94 | } |