html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: black;
  font-family: Arial;
}

.circle {
  animation: spin 10s linear infinite;
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border-radius: 50%;
}

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  background: coral;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Position items evenly around the circlea */
.item:nth-child(1) { transform: rotate(0deg)   translate(120px) rotate(0deg); }
.item:nth-child(2) { transform: rotate(45deg)  translate(120px) rotate(-45deg); }
.item:nth-child(3) { transform: rotate(90deg)  translate(120px) rotate(-90deg); }
.item:nth-child(4) { transform: rotate(135deg) translate(120px) rotate(-135deg); }
.item:nth-child(5) { transform: rotate(180deg) translate(120px) rotate(-180deg); }
.item:nth-child(6) { transform: rotate(225deg) translate(120px) rotate(-225deg); }
.item:nth-child(7) { transform: rotate(270deg) translate(120px) rotate(-270deg); }
.item:nth-child(8) { transform: rotate(315deg) translate(120px) rotate(-315deg); }