div.container
  div.react
    div.react__spoke.react__spoke--0
    div.react__spoke.react__spoke--1
    div.react__spoke.react__spoke--2
    div.react__spoke--3
View Compiled
$col:#55DBF8;
body{
  margin:0;
}
.container{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#282C33;
}
.react{
  width:10rem;
  display:flex;
  align-items:center;
  justify-content:center;
  height:10rem;
  animation: anim__rotate 8.2s linear infinite; 
  &__spoke{
    position:absolute;
    border:.45rem $col solid;
    height:4rem;
    width:11rem;    
    border-radius:250%;
    &--0{

    }
    &--1{
      transform:rotate(60deg);

    }
    &--2{
      transform:rotate(-60deg);

    }
    &--3{
      height:2.2rem;
      width:2.2rem;
      background-color:$col;
      border-radius:50%;
      position:absolute;
    }
  }
}
@keyframes anim__rotate{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.