<div class="loader">

   <div class="one">

     <div class="two">

       <div class="thre">

         <div class="four">

           <div class="five"></div>

         </div>

       </div>

     </div>

  </div>

</div>

html,

body,

.loader {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: black;

}

div{

  border: 10px solid white;

  border-radius: 50%;

  margin: 10px;

}

.loader {

    width: 10em;

    height: 10em;

    position: relative;

    font-size: 24px;

}

.loader div {

    background-color: rgba(100%, 0%, 0%, 0.3);

    border-color: white rgba(100%, 100%, 100%, 0.2);

    /* 名称 周期 速度 次数 是否反向播放 */

    animation: animate 5s linear infinite normal;

}

@keyframes animate {

    0% {

        /* red */

        background-color: rgba(100%, 0%, 0%, 0.3);

        transform: rotate(0deg);

    }

    25% {

        /* yellow */

        background-color: rgba(100%, 100%, 0%, 0.3);

    }

    50% {

        /* green */

        background-color: rgba(0%, 100%, 0%, 0.3);

    }

    75% {

        /* blue */

        background-color: rgba(0%, 0%, 100%, 0.3);

    }

    100% {

        /* purple */

        background-color: rgba(100%, 0%, 100%, 0.3);

        transform: rotate(720deg);

    }

}