client/src/sass/loading-bar.scss

   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 }