  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #111;
  }

  .container {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .ring {
      position: relative;
      width: 150px;
      height: 150px;
      border: 4px solid transparent;
      border-top: 4px solid #24ecff55;
      border-radius: 50%;
      margin: -30px;
      filter: drop-shadow(0 0 10px #24ecff) drop-shadow(0 0 30px #24ecff) drop-shadow(0 0 50px #24ecff);
      animation: animate 4s linear infinite;
  }

  @keyframes animate {
      0% {
          transform: rotate(0deg);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  .ring::before {
      content: "\f135";
      position: absolute;
      top: 10px;
      right: -4px;
      rotate: 90deg;
      font-family: fontAwesome;
      color: #24ecff;
      font-size: 2em;
  }

  .ring:nth-child(2) {
      border: 4px solid transparent;
      border-left: 4px solid #93ff2d;
      filter: drop-shadow(0 0 10px #93ff2d) drop-shadow(0 0 30px #93ff2d) drop-shadow(0 0 50px #93ff2d);
      animation: animate2 4s linear infinite;
      animation-delay: -1s;
  }

  .ring:nth-child(2)::before {
      content: "\f072";
      top: initial;
      bottom: -6px;
      left: 12px;
      right: initial;
      rotate: 45deg;
      color: #93ff2d;
  }

  @keyframes animate2 {
      0% {
          transform: rotate(360deg);
      }

      100% {
          transform: rotate(0deg);
      }
  }

  .ring:nth-child(3) {
      position: absolute;
      top: -66.66px;
      border: 4px solid transparent;
      border-left: 4px solid #ff1d6c55;
      filter: drop-shadow(0 0 10px #ff1d6c) drop-shadow(0 0 30px #ff1d6c) drop-shadow(0 0 50px #ff1d6c);
      animation: animate2 4s linear infinite;
      animation-delay: -3s;
  }

  .ring:nth-child(3)::before {
      content: "\e518";
      rotate: 135deg;
      top: initial;
      right: initial;
      bottom: -6px;
      left: 12px;
      color: #ff1d6c;
  }