client/src/sass/loading-bar.scss

   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;
  12   color: var(--mainColor);
  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
  21   background: var(--mainColor);
  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 }