1 // Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css
3 /* Make clicks pass-through */
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;
12 color: var(--mainColor);
16 -webkit-transition: width 350ms;
17 -moz-transition: width 350ms;
18 -o-transition: width 350ms;
19 transition: width 350ms;
21 background: var(--mainColor);
28 border-bottom-right-radius: 1px;
29 border-top-right-radius: 1px;
32 /* Fancy blur effect */
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;
45 -moz-border-radius: 100%;
46 -webkit-border-radius: 100%;
50 #loading-bar-spinner {
58 #loading-bar-spinner .spinner-icon {
62 border: solid 2px transparent;
63 border-top-color: inherit;
64 border-left-color: inherit;
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;
74 @-webkit-keyframes loading-bar-spinner {
75 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
76 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
78 @-moz-keyframes loading-bar-spinner {
79 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
80 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
82 @-o-keyframes loading-bar-spinner {
83 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
84 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
86 @-ms-keyframes loading-bar-spinner {
87 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
88 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
90 @keyframes loading-bar-spinner {
91 0% { transform: rotate(0deg); }
92 100% { transform: rotate(360deg); }