Custom Loading Controller

Hello Everyone

I am trying to use a custom CSS modified loading animation using the CustomLoadingController. Can someone share me how to embed custom CSS class which can be added to the elements.

this.loading = this.loadingCtrl.create({
      spinner: "hide",
      content: `<div class="holder"">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>`
    });
    this.loading.present();

The CSS code i want to embed is

$duration: 10s;
  $ease: ease-in-out;

  .holder {
    width: 50px;
    height: 50px;
    position: relative;
    .circle {
      border-radius: 100% 100% 0 0;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transform-origin: bottom center;
    }
    @for $i from 1 through 16 {
      .circle:nth-child(#{$i}) {
        $size: 0;
        @if ($i > 1) {
          $size: 31px * ($i - 1);
          border: 13px solid black;
        } @else {
          $size: 25px;
          background: black;
        }
        border-bottom: none;
        border-radius: $size $size 0 0;
        width: $size;
        height: $size / 2;
        z-index: 16 - $i;
        animation: circle-#{$i} $duration infinite $ease;
      }
      @keyframes circle-#{$i} {
        0% {
          transform: translateX(-50%) rotate(0deg);
        }
        100% {
          transform: translateX(-50%) rotate(-($i * 360deg));
        }
      }
    }
  }