импульсная анимация с другим цветовым кодом (Angular 8)

Question

Я хочу создать 12 разных цветов импульсной анимации.

Мой текущий код выглядит примерно так:

///////////////////////////////////////////// red pulse /////////////////////////////////////////////

  .red-pulse {
    margin: 100px;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: red-pulse 2s infinite;
    position: relative;
  }

  .red-pulse::before {
    content: '';
    animation: red-pulse 2s infinite;
    animation-delay: 0.5s;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  @-webkit-keyframes red-pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 mat-color($mat-red, 500, .4);
    }
    70% {
      -webkit-box-shadow: 0 0 0 10px transparent;
    }
    100% {
      -webkit-box-shadow: 0 0 0 0 transparent;
    }
  }

  @keyframes red-pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 mat-color($mat-red, 500, .4);
      box-shadow: 0 0 0 0 mat-color($mat-red, 500, .4);
    }
    70% {
      -moz-box-shadow: 0 0 0 10px transparent;
      box-shadow: 0 0 0 40px transparent;
    }
    100% {
      -moz-box-shadow: 0 0 0 0 transparent;
      box-shadow: 0 0 0 0 transparent;
    }
  }
...

Я был создан 12 раз в разных цветах и ​​мой размер файла довольно большой.

Как я могу реализовать это без создания 12 раз этого кода? или если это будущее, если я хочу добавить больше цветов?