react logo

by Pranab Dey

HTML

<div class="main">
  <div class="circle">
    <span class="atom"></span>
  </div>
</div>

SCSS

$color: #00d8ff;
.menu{
  width: 50px; height: 150px; border-radius: 50%;
  border: 6px solid $color;
}
.menu2{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}

body{
  background: #333;
}
.main{
  @extend .menu2;
  .circle{
     @extend .menu; transform: rotate(-90deg); animation: react 1.5s linear infinite;
    .atom{
      width: 30px; height: 30px; background: $color; border-radius: 50%;
      @extend .menu2;
    }
    &:before{
      content:'';@extend .menu; position: absolute;
      transform: rotate(60deg); left: -5px; bottom:-8px;
    }
    &:after{
      content:'';@extend .menu; position: absolute;
      transform: rotate(-60deg); left:-5px; bottom: -8px;
    }
  }
}

@keyframes react{
  0%{
    transform: rotate(0deg);
  }
  15%{
    transform: rotate(180deg);
  }
  20%{
    transform: rotate(-180deg);
  }
  100%{
    transform: rotate(0deg);
  }
}