body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: black;
  background-color: #000;
}

#loader {
    width: 50px;
    height: 50px;

    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}






/*** dashed circles ***/

.loaderC1{
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px dashed #333;
  animation: turnOverAndOverLeft 9s infinite linear;
}
.loaderC2{
position: absolute;
  margin: 3px 0px 0px 3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed #333;
  animation: turnOverAndOverRight 7s infinite linear;
}
.loaderC3{
 position: absolute;
  margin: 7px 0px 0px 7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px dashed #333;
  animation: turnOverAndOverLeft 5s infinite linear;
}





@keyframes turnOverAndOverRight {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(-360deg);
  }
}

@keyframes turnOverAndOverLeft {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}