<div class="asterisk asterisk-2">
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
</div>

<div class="asterisk asterisk-3">
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
</div>

<div class="asterisk asterisk-4">
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
</div>

<div class="asterisk asterisk-5">
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
</div>

<div class="asterisk asterisk-6">
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
  <div class="asterisk-line"></div>
</div>
body {
  padding: 10px;
}
.asterisk {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  animation: spin 10s infinite linear;
}
.asterisk-line {
  position: absolute;
  top: calc(50% - 10px);
  display: inline-bock;
  width: 100px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
}
@mixin asterisk-n($n, $color) {
  .asterisk-line {
    background: $color;
  }
  @for $i from 1 through $n {      
    .asterisk-line:nth-child(#{$i}) {
      transform: rotate(calc(#{$i}*180deg/#{$n}));
    }
  }
}
.asterisk-2 {
  .asterisk-line {
    background: rgba(0, 255, 255, 0.5);  
    &:nth-child(2) {
      transform: rotate(90deg);
    }
  }
}
.asterisk-3 {
  .asterisk-line {
    background: rgba(0, 255, 0, 0.5);  
    &:nth-child(2) {
      transform: rotate(60deg);
    }
    &:nth-child(3) {
      transform: rotate(120deg);
    }
  }
}
.asterisk-4 {
  .asterisk-line {
    background: rgba(255, 0, 255, 0.5);  
    &:nth-child(2) {
      transform: rotate(45deg);
    }
    &:nth-child(3) {
      transform: rotate(90deg);
    }
    &:nth-child(4) {
      transform: rotate(135deg);
    }
  }
}
.asterisk-5 {
  .asterisk-line {
    background: rgba(255, 255, 0, 0.5);  
    &:nth-child(2) {
      transform: rotate(36deg);
    }
    &:nth-child(3) {
      transform: rotate(72deg);
    }
    &:nth-child(4) {
      transform: rotate(108deg);
    }
    &:nth-child(5) {
      transform: rotate(144deg);
    }
  }
}
.asterisk-6 {
  @include asterisk-n(6, rgba(255, 100, 100, 0.4));
}
@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}
View Compiled
Rerun