aside#loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;

  display: none;

  margin: auto;

  background: rgba(0, 0, 0, .8);

  &.show {
    display: block;
  }

  > span {
   position: absolute;
   top: 50%;
   right: 0;
   bottom: 0;
   left: 0;

   margin: 55px auto;

   font-family: "Roboto", sans-serif;
   text-align: center;

   color: white;
 }

 > .spinner {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

   width: 70px;
   height: 70px;
   margin: auto;

   animation: rotation 1.4s linear infinite;

   stroke:#4285f4;

   > .circle {
     
     transform-origin: center;

     animation: turn 1.4s ease-in-out infinite;

     stroke-dasharray: 187;
     stroke-dashoffset: 0;
   }
 }
}

@keyframes rotation {

0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(270deg);
  }
}

@keyframes turn {

0% {
    stroke-dashoffset: 187;
  }

  50% {
    transform: rotate(135deg);

    stroke-dashoffset: 46.75;
  }

  100% {
    transform: rotate(450deg);

    stroke-dashoffset: 187;
  }
}
