.loader-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: rgba(39, 158, 188, 0.5); /*#279ebc;*/
  display:none;
  opacity: 1;
}

/*
<div class="loader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>
*/

.loader {
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  width: 150px;
  height: 150px;
  z-index:2000;
  display:block;
}
.loader:before {
  content: "";
  display: block;
  padding-top: 100%;
}

body.loading { overflow:hidden; }

body.loading .loader-backdrop {
  display:block !important;
}

.circular {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke: #fff;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
}

.path.colored {
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
}

/*
<div class='win-loader'>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
</div>
*/
.win-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 50px;
  height: 50px;
  margin: auto;
}
.win-loader .circle {
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 0;
  transform: rotate(225deg);
  animation-iteration-count: infinite;
  animation-name: orbit;
  animation-duration: 5.5s;

}
.win-loader .circle:after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  /*
  blue
  background-color: rgba(0, 153, 255, 0.69);
  */
  background-color: rgba(255, 255, 255, 0.69);
  box-shadow: 0 0 9px rgba(255, 255, 255, .7);
}
.win-loader .circle:nth-child(2) {
  animation-delay: 240ms;
}
.win-loader .circle:nth-child(3) {
  animation-delay: 480ms;
}
.win-loader .circle:nth-child(4) {
  animation-delay: 720ms;
}
.win-loader .circle:nth-child(5) {
  animation-delay: 960ms;
}
@keyframes orbit {
  0% {
    transform: rotate(225deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  7% {
    transform: rotate(345deg);
    animation-timing-function: linear;
  }
  30% {
    transform: rotate(455deg);
    animation-timing-function: ease-in-out;
  }
  39% {
    transform: rotate(690deg);
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(815deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(945deg);
    animation-timing-function: ease-out;
  }
  76% {
    transform: rotate(945deg);
    opacity: 0;
  }
  100% {
    transform: rotate(945deg);
    opacity: 0;
  }
}


/*
<div class="dot-loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
*/

.dot-loader {
  position:fixed;
  top:0;
  left:0;
  transform:translate(0,-50%);
  z-index:2000;
  width:90vw;
  opacity:1;
}

.dot-loader span {
  width:5px;
  height:5px;
  background:white;
  display:inline-block;
  position:relative;
  margin:0px 2px;
  border-radius:50%;
  opacity:0;
  animation:dotloading 3000ms ease-in-out infinite;
}
.dot-loader span:nth-child(5) {
  animation-delay:100ms;
}
.dot-loader span:nth-child(4) {
  animation-delay:200ms;
}
.dot-loader span:nth-child(3) {
  animation-delay:300ms;
}
.dot-loader span:nth-child(2) {
  animation-delay:400ms;
}
.dot-loader span:nth-child(1) {
  animation-delay:500ms;
}
@keyframes dotloading {
  0% {
    transform:translateX(-350px);
    opacity:0;
  }
  15%,30% {
    transform:translateX(10px);
    opacity:1;
  }

  100% {
    transform:translateX(350px);
    opacity:0;
  }
}