.loadingWrapper{
    transform: rotate(275deg);

}
.loading {
    position: relative;
    height: 6rem;
    width: 6rem;
    margin:  0 auto;
    animation:0.8s step-start infinite rotation1;
  }
  .loading-item {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #E2F2FF;
    position: absolute;
    top: 50%;
    left: 50%;
    /** HTML内で付与したindex番号を取得して角度を計算。 */
    --angle: calc(360deg / 10 * var(--index));
    /** コサイン関数とサイン関数で座標位置を計算。 */
    --x: calc(cos(var(--angle)) * 25px);
    --y: calc(sin(var(--angle)) * 25px);
    translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
    --duration: 1s;
    --delay: calc(var(--duration) * var(--index) / 8);
    /* animation: animate var(--duration) var(--delay) infinite ease-in-out; */
    
}

.loading-item:nth-child(1){
    background-color: #E2F2FF;
}
.loading-item:nth-child(2){
    background-color: #CCEDF9;
}
.loading-item:nth-child(3){
    background-color: #99CCFF;
}
.loading-item:nth-child(4){
    background-color: #6699FF;
}
.loading-item:nth-child(5){
    background-color: #3366CC;
}
.loading-item:nth-child(6){
    background-color: #253FC8;
}
.loading-item:nth-child(7){
    background-color: #140A9A;
}

.loading-item:nth-child(8){
    background-color: #0C065C;
}
.loading-item:nth-child(9){
    background-color: #08043E;
}
.loading-item:nth-child(10){
    background-color: #04121F;
}


@keyframes rotation1{
    0%{ transform:rotate(0);}
    10%{ transform:rotate(36deg);}
    20%{ transform:rotate(72deg);}
    30%{ transform:rotate(108deg);}
    40%{ transform:rotate(144deg);}
    50%{ transform:rotate(180deg);}
    60%{ transform:rotate(216deg);}
    70%{ transform:rotate(252deg);}
    80%{ transform:rotate(288deg);}
    90%{ transform:rotate(324deg);}
    100%{ transform:rotate(360deg); }
  }
 
@keyframes animate {
    0%{
        background-color: #E2F2FF;
    }
    10%{
        background-color: #CCEDF9;
    }
    20%{
        background-color: #99CCFF;
    }
    30%{
        background-color: #6699FF;
    }
    40% {
        background-color: #3366CC;
    }
    50% {
        background-color: #253FC8;
    }
    60% {
        background-color: #140A9A;
    }
    70% {
        background-color: #0C065C;
    }
    80% {
        background-color: #08043E;
    }
    90%{
        background-color: #04121F;
    }
    
  }
/* 
  @keyframes animate {
    0%{
        background-color: #04121F;
    }
    10%{
        background-color: #08043E;
    }
    20%{
        background-color: #0C065C;
       
    }
    30%{
        background-color: #140A9A;
    }
    40% {
        background-color: #253FC8;
        
    }
    50% {
        background-color: #3366CC;
    }
    60% {
        background-color: #6699FF;
    }
    70% {
        background-color: #99CCFF;
    }
    80% {
        background-color: #CCEDF9;
    }
    90%{
        background-color: #E2F2FF;
    }
    
  } */