Angular 6 Animation не отображается

Question

Я пытаюсь добавить анимационный спиннер в мое угловое приложение

Я нахожу этот блесну:

https://codepen.io/z-/pen/OPzNLz

spinner.component.html

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
  animations: []
})
export class SpinnerComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}

/*Negative delay values skip rather than pause.*/

.test {
  background: yellow;
}

.row1 .left,
.row1 .right {
  animation-delay: -0s;
  /*Obviously not needed*/
}

.row2 .left,
.row2 .right {
  animation-delay: -0.5s;
}

.row3 .left,
.row3 .right {
  animation-delay: -1s;
}

.row4 .left,
.row4 .right {
  animation-delay: -1.5s;
}


/**/

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 84px;
}

.left,
.right {
  height: 6px;
  width: 90px;
  background-color: #000;
  border-radius: 10px;
  position: absolute;
}

.left {
  left: 0px;
  animation: left 2s infinite;
}

.right {
  right: 0px;
  animation: right 2s infinite;
}

.row1,
.row2,
.row3,
.row4 {
  position: relative;
}

.row1 {
  top: 0px;
}

.row2 {
  top: 26px;
}

.row3 {
  top: 52px;
}

.row4 {
  top: 78px;
}

@keyframes left {
  0%,
  50%,
  100% {
    width: 90px;
  }
  25% {
    width: 170px;
  }
  75% {
    width: 10px;
  }
}

@keyframes right {
  0%,
  50%,
  100% {
    width: 90px;
  }
  25% {
    width: 10px;
  }
  75% {
    width: 170px;
  }
}

<div class="test">Spinner</div>

<div class="loader">
  <div class="row1">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row2">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row3">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row4">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

Я взял файл HTML и CSS и скопировал его в обычный html и css, и показался спиннер.

затем я подумал, почему бы не использовать его в качестве компонента в angular

, поэтому я копирую код в компонент, но кажется, что счетчик не работает, он просто не отображается - без ошибок.

Я даже проверяю, что BrowserAnimationsModule импортирован в app.module.ts, но его изменение, похоже, меняется.

Answer 1

Выпуск был примечания например / ** / в CSS.