.spinner {
  position: relative;
  width: 120px;
  height: 120px;
  animation: rotate 6s linear infinite;
}
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
.red    { transform: rotate(0deg); }
.blue   { transform: rotate(60deg); }
.green  { transform: rotate(120deg); }
.orange { transform: rotate(180deg); }
.purple { transform: rotate(240deg); }
.teal   { transform: rotate(300deg); }
.dot-inner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  animation: radiusCycle 3s ease-in-out infinite;
  transform: translateX(40px);
}
.red .dot-inner    { color: #f44336; }
.blue .dot-inner   { color: #2196f3; }
.green .dot-inner  { color: #4caf50; }
.orange .dot-inner { color: #ff9800; }
.purple .dot-inner { color: #9c27b0; }
.teal .dot-inner   { color: #009688; }

@keyframes rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes radiusCycle {
  0%   { transform: translateX(40px); }
  20%  { transform: translateX(15px); }
  50%  { transform: translateX(15px); }
  70%  { transform: translateX(40px); }
  100% { transform: translateX(40px); }
}