rainbow.css

body{
    margin: 0;
    padding: 0;
    background-color: black;
  }

  .center{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  ul{
    margin: 0;
    padding: 0;
    position: relative;
    width: 400px;
    height: 240px;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,.2);
  }

  ul li{
    list-style: none;
    border-radius: 50%;
    border: 15px solid #000;
    position: absolute;
    top: 100%;
    left: 50%;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    animation: animate 5s infinite alternate;
    transform: translate(-50%,-50%);
  }

  .one{
    width: 60px;
    height: 60px;
    border-color:#FF0000;
    animation-delay: .2s;
    animation-duration: 5s;
    animation-name: animate;
  }

  .two{
    width: 90px;
    height: 90px;
    border-color:#FF7F00;
    animation-delay: .4s;
    animation-duration: 5s;
    animation-name: animate;
  }

  .three{
    width: 120px;
    height: 120px;
    border-color:#FFFF00;
    animation-delay: .6s;
    animation-duration: 5s;
    animation-name: animate;
  }

  .four{
    width: 150px;
    height: 150px;
    border-color:#00FF00;
    animation-delay: .8s;
    animation-duration: 5s;
    animation-name: animate;
  }

  .five{
    width: 180px;
    height: 180px;
    border-color:#0000FF;
    animation-delay: 1s;
    animation-duration: 5s;
    animation-name: animate;
  }

  .six{
    width: 210px;
    height: 210px;
    border-color:#4B0082;
    animation-delay: 1.2s;
    animation-duration: 5s;
    animation-name: animate;
  }

  .seven{
    width: 240px;
    height: 240px;
    border-color:#9400D3;
    animation-delay: 1.4s;
    animation-duration: 5s;
    animation-name: animate;
  }

  @keyframes animate{
    0%{
      transform: translate(-50%,-50%) rotate(-45deg);
    }

    100%{
      transform: translate(-50%,-50%) rotate(315deg);
    }
  }