body {
  background: #eef;
}

#ui {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -70px;
  filter: drop-shadow(2px 3px 1px #bbb);
}
#ui .primary {
  position: absolute;
  width: 100px;
  height: 100px;
  margin-top: -40px;
  background: black;
  border-radius: 999px;
  transition: 400ms cubic-bezier(0.19, 1, 0.22, 1);
  animation: primaryRotate 6000ms linear infinite;
}
#ui .primary::before {
  content: "";
  position: absolute;
  top: 33px;
  left: 33px;
  width: 45px;
  height: 45px;
  border: 5px dotted #000;
  background: #fff;
  border-radius: 999px;
  animation: secondaryRotate 1000ms linear infinite;
}
#ui .primary::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 40px;
  height: 40px;
  border: 2px dotted #000;
  background: #fff;
  border-radius: 999px;
  box-sizing: border-box;
}
#ui .primary .gear {
  position: absolute;
  top: 42px;
  left: -8px;
  width: 116px;
  height: 16px;
  background: black;
  border-radius: 3px;
}
#ui .primary .gear:nth-child(1) {
  transform: rotateZ(0deg);
}
#ui .primary .gear:nth-child(2) {
  transform: rotateZ(30deg);
}
#ui .primary .gear:nth-child(3) {
  transform: rotateZ(60deg);
}
#ui .primary .gear:nth-child(4) {
  transform: rotateZ(90deg);
}
#ui .primary .gear:nth-child(5) {
  transform: rotateZ(120deg);
}
#ui .primary .gear:nth-child(6) {
  transform: rotateZ(150deg);
}
#ui .primary .gear:nth-child(7) {
  transform: rotateZ(180deg);
}
#ui .primary .gear:nth-child(8) {
  transform: rotateZ(210deg);
}
#ui .secondary {
  position: absolute;
  top: 84px;
  left: 84px;
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 999px;
  transition: 400ms cubic-bezier(0.19, 1, 0.22, 1);
}
#ui .secondary::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 999px;
}
#ui .secondary::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 20px;
  border: 1px dotted #000;
  background: #fff;
  border-radius: 999px;
  box-sizing: border-box;
}
#ui .secondary .gear {
  position: absolute;
  top: 20px;
  left: -8px;
  width: 66px;
  height: 10px;
  background: black;
  border-radius: 3px;
}
#ui .secondary .gear:nth-child(1) {
  transform: rotateZ(3deg);
}
#ui .secondary .gear:nth-child(2) {
  transform: rotateZ(48deg);
}
#ui .secondary .gear:nth-child(3) {
  transform: rotateZ(93deg);
}
#ui .secondary .gear:nth-child(4) {
  transform: rotateZ(138deg);
}
#ui.switch .primary {
  margin-top: 0;
}
#ui.switch .secondary {
  animation: secondaryRotate 4000ms linear infinite;
}

@keyframes primaryRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes secondaryRotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}