Создание колесной анимации для кнопок

Question

Я пытаюсь создать анимацию колесика для списка из 9 значков, которые нужно повернуть, и они должны быть видны в зависимости от состояния логического состояния, поэтому я попробовал вот так

HTML

<div class="buttons " >
    <div *ngIf="A" >A</div>
    <div *ngIf="B" >B</div>
    <div *ngIf="C" >C</div>
    <div *ngIf="D" >D</div>
</div>

CSS

// кнопка вращения

.buttons {
    position: absolute;
    width: 40%;
    height: 40%;
    z-index: 1;
    left: 40%;

}

.buttons div {
    position: absolute;
    animation: bucket_rotate 60s infinite linear ;
    top: 80%;
    margin-top: 60%;
    margin-left: -13px;
    color: white;
}


@keyframes buttons_rotate {
    0% { 
    transform: rotate(0) translateX(75px) rotate(0); 
    }
    100% { 
    transform: rotate(360deg) translateX(75px) rotate(-360deg); 
    }
}

/ * виден только один элемент * /

 .buckets div:nth-last-child(1) {
    color: red;
    animation-delay: 55s;
  }

/ * видны только два элемента * /

  .buckets div:nth-child(2),
      .buckets div:nth-child(2) ~ .buckets {
        color: blue;
        animation-delay: 30s;
      }

/ * видны только три элемента * /

  .buckets div:nth-child(3),
      .buckets div:nth-child(3) ~ .buckets {
        color: green;
        animation-delay: 30s;
      }

Что мне нужно, это когда мой файл .ts возвращает истинное значение, тогда этот элемент будет отображаться, если 1 элемент означает, что элемент должен вращаться на 360 градусов если 2 означает, что каждый элемент должен быть расположен напротив друг друга и вращаться по кругу если 3 означает, должен вращаться как треугольник может ли кто-нибудь помочь мне с этим