Useless spinner

by konglie

HTML

<svg viewBox="0 0 100 100"  preserveAspectRatio="none" class="triangle red">
  <path d="M0 0 L0 100 L100 100 Z" />
</svg>
<svg viewBox="0 0 100 100"  preserveAspectRatio="none" class="triangle green">
  <path d="M0 0 L0 100 L100 100 Z" />
</svg>
<svg viewBox="0 0 100 100"  preserveAspectRatio="none" class="triangle blue">
  <path d="M0 0 L0 100 L100 100 Z" />
</svg>
<svg viewBox="0 0 100 100"  preserveAspectRatio="none" class="triangle yellow">
  <path d="M0 0 L0 100 L100 100 Z" />
</svg>

CSS

.triangle {
  width: 150px;
  height: 50px;
  top: 250px;
  left: 250px;
  position: absolute;
  animation: spin 4s linear infinite;
  transform-origin: 0% 0%;
}

.triangle.red path {
  fill: #900;
}

.triangle.green {
  fill: #090;
  animation-delay: 1s;
}

.triangle.blue {
  fill: #009;
  animation-delay: 2s;
}

.triangle.yellow {
  fill: #990;
  animation-delay: 3s;
}

.triangle::before {
  content: 'a';
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  
  50% {
    transform: rotate(180deg) scale(.3);
  }
  
  100% {
    transform: rotate(360deg) scale(1);
  }
}