.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transform-origin: center;
            transform-origin: center;
    width: 120px;
    height: 120px;
  }
   
  .spinner span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 12px;
  }
  
  .spinner.type1 {
    border-radius: 50%;
    border-width: 8px;
    border-style: solid;
    border-color: #E86AA1 rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12);
    -webkit-animation: spinner1_1 1.5s infinite linear forwards;
            animation: spinner1_1 1.5s infinite linear forwards;
  }
  .spinner.type1 span {
   
    animation: spinner_loading_text 1.5s infinite linear forwards reverse;
  }
   

  @-webkit-keyframes spinner1_1 {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
              transform: translate(-50%, -50%) rotate(0);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
   
  @keyframes spinner1_1 {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
              transform: translate(-50%, -50%) rotate(0);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
   
  
  @-webkit-keyframes spinner_loading_text {
    0% {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
      opacity: 0;
      -webkit-transform: translate(-50%, -50%) rotate(180deg);
              transform: translate(-50%, -50%) rotate(180deg);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes spinner_loading_text {
    0% {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
      opacity: 0;
      -webkit-transform: translate(-50%, -50%) rotate(180deg);
              transform: translate(-50%, -50%) rotate(180deg);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
        .box{
          position: fixed;
          width: 100%;
          height: 100%;
          z-index: 9999;
          -webkit-transition: all 1.2s ease; 
          transition: all 1.2s ease;
          color: #fff; 
          background: -moz-linear-gradient( right,#FFB6AE, #FF8EA2);
          background: -webkit-linear-gradient(right,#FFB6AE, #FF8EA2); 
          background: linear-gradient(to right, #FFB6AE, #FF8EA2);
        }

        .box.loaded{
        
          opacity:0;
          visibility:hidden;
          pointer-events:none;
        }