JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="wheel">
  <div class="wheel__inner wheel__inner--1"></div>
  <div class="wheel__inner wheel__inner--2"></div>
  <div class="wheel__inner wheel__inner--3"></div>
</div>
<div class="wheel">
  <div class="wheel__inner wheel__inner--1"></div>
  <div class="wheel__inner wheel__inner--2"></div>
  <div class="wheel__inner wheel__inner--3"></div>
</div>

SCSS

@mixin rotate($angle){
  -webkit-transform: rotate($angle);
  -moz-transform: rotate($angle);
  -ms-transform: rotate($angle);
  -o-transform: rotate($angle);
  transform: rotate($angle);
}
@-webkit-keyframes rotate {
  from { @include rotate(0deg) }
  to { @include rotate (360deg) }
}
.wheel {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 8px solid #666;
  -webkit-animation: rotate infinite 2s linear;
  box-shadow:  0 0 0 12px #444;
  float: left;
  margin: 20px;
  &, *, :before, :after, &:before, &:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  &:after, &:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    margin-top: -15px; 
    margin-left: -15px;
    border-radius: 50%;
  }
  &:before {
    background: #fff;
    border: 4px solid #666;
    z-index: 1;
  }
  &:after {
    box-shadow: inset 0 0 12px 2px #111;
    border: 5px solid transparent;
    z-index: 2;
  }
  &__inner {
    &:before, &:after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: #444;
      box-shadow: 1px 1px 3px #8f8f8f;
    }
    &--1 {
      &:after {
        @include rotate(0deg);
      }
      &:before {
        @include rotate(30deg);
      }
    }
    &--2 {
      &:after {
        @include rotate(60deg);
      }
      &:before {
        @include rotate(90deg);
      }
    }
    &--3 {
      &:after {
        @include rotate(120deg);
      }
      &:before {
        @include rotate(150deg);
      }
    }
  }
}