.looader {
  width: 48px;
  height: 48px;
  border: 2px solid #35063e;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.looader::after,
.looader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  background: #FF3D00;
  width: 6px;
  height: 6px;
  transform: translate(150%, 150%);
  border-radius: 50%;
}
.looader::before {
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  transform: translate(-150%, -150%);
}

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

/* Outer Spinner */
.spinnerw {
    width: 48px;
    height: 48px;
    border: 3px solid #35063e;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    position: relative;
    box-sizing: border-box;
    animation: spinOuter 2s linear infinite;
}

/* Inner Spinner Layer */
.spinnerw::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid #FF3D00;
    border-style: solid solid dotted;
    border-radius: 50%;
    box-sizing: border-box;
    animation: spinInner 1s linear infinite;
}

/* Outer clockwise spin */
@keyframes spinOuter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Inner counterclockwise spin */
@keyframes spinInner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}




        .logerer {
          position: relative;
          display: flex;
        }
        .logerer:before , .logerer:after {
            content: '';
            width: 15px;
            height: 15px;
            display: inline-block;
            position: relative;
            margin: 0  5px  ;
            border-radius: 50%;
            color: purple;
            background: currentColor;
            box-shadow: 50px 0 ,  -50px 0;
            animation: left 1s infinite ease-in-out;
          }
          .logerer:after {
            color: #FF3D00;
            animation: right 1.1s infinite ease-in-out;
          }


        @keyframes right {
          0% , 100%{transform: translateY(-10px) }
          50% { transform: translateY(10px) }
        }

        @keyframes left {
          0% , 100%{ transform: translateY(10px) }
          50% { transform: translateY(-10px) }
        }





        .spinerp{
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          position: absolute;
        }
        .spinnerer {
          transform: rotateZ(45deg);
          perspective: 1000px;
          border-radius: 50%;
          width:70px;
          height:70px;
          color: purple;
        }
          .spinnerer:before,
          .spinnerer:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: 50%;
            transform: rotateX(70deg);
            animation: 1s spinx linear infinite;
          }
          .spinnerer:after {
            color: #FF3D00;
            transform: rotateY(70deg);
            animation-delay: .4s;
          }

        @keyframes rotate {
          0% {
            transform: translate(-50%, -50%) rotateZ(0deg);
          }
          100% {
            transform: translate(-50%, -50%) rotateZ(360deg);
          }
        }

        @keyframes rotateccw {
          0% {
            transform: translate(-50%, -50%) rotate(0deg);
          }
          100% {
            transform: translate(-50%, -50%) rotate(-360deg);
          }
        }

        @keyframes spinx {
          0%,
          100% {
            box-shadow: .2em 0px 0 0px currentcolor;
          }
          12% {
            box-shadow: .2em .2em 0 0 currentcolor;
          }
          25% {
            box-shadow: 0 .2em 0 0px currentcolor;
          }
          37% {
            box-shadow: -.2em .2em 0 0 currentcolor;
          }
          50% {
            box-shadow: -.2em 0 0 0 currentcolor;
          }
          62% {
            box-shadow: -.2em -.2em 0 0 currentcolor;
          }
          75% {
            box-shadow: 0px -.2em 0 0 currentcolor;
          }
          87% {
            box-shadow: .2em -.2em 0 0 currentcolor;
          }
        }



        .loaderrd, .loaderrd:before {
          display: inline-block;
          border: 20px double transparent;
          border-top-color: purple;
          border-radius: 50%;
          box-sizing: border-box;
        }
        .loaderrd {
          padding: 8px;
          animation: wifiLoading 1s ease-in infinite;
        }
        .loaderrd:before {
          content: '';
          width: 0; height: 0;
        }
        @keyframes wifiLoading {
          0% { border-style: none}
          100% { border-style: double}
        }