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