*{
  box-sizing: border-box;
}
.loading{
  width:400px;
  height:400px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:2rem;
  overflow:hidden;
  margin:10px auto;
  position:relative;
  animation: text-color 2s ease-in-out infinite alternate-reverse;
}
.spinner-sec{
  position: absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  border: 5px dotted transparent;
  animation: rotate var(--duration) var(--timming) infinite;
}

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

@keyframes text-color {
   0%   {color: rgba(0,0,0,0.8);}
  50%  {color: rgba(0,0,0,0.4);}
  100% {color: rgba(0,0,0,0.2);}
}

@media only screen and (max-width: 500px) {
    .loading{
      width:200px;
      height:200px;
    }
    .spinner-sec{
        border: 3px dotted transparent;
    }
}

.spin-sec-one{
  border-left-color: #fc4236;
  --duration:2s;
  --timming:ease-in;
}
.spin-sec-two{
   border-top-color: #009dc9;
   --duration:2s;
   --timming:ease-in-out;
}
.spin-sec-three{
   border-right-color: #98c328;
   --duration:2s;
   --timming:ease-out;
}