revolving circles demo

by Richard Hunter

HTML

<div class="main">
   <div class="circle">
     <div class="label">A</div>
     <div class="tooltip">This is the tooltip</div>
   </div>
 </div>

SCSS

$orbit: 20s;

body {
  background: antiquewhite;
  font-family: "Open Sans", sans-serif;
  color: blanchedalmond;
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  display: flex;
  min-height: 100vh;
}

.main {
  display: block;
  width: 400px;
  height: 400px;
  background: pink;
  margin: auto;
  animation: spin-main $orbit linear infinite;
}

.circle{
  position: absolute;
  width: 4em;
  height: 4em;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  background: rgba(16, 63, 236, 0.6);
  animation: spin-square $orbit linear infinite;
  display: flex;
  border-radius: 50%;
}

.label {
  margin: auto;
  font-size: 1.4em;
}

.tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  white-space: nowrap;
  margin-left: 20px;
  padding: 10px;
  color: oldlace;
  background-color: coral;
  box-sizing: border-box;
  transform: translateY(-50%);
  transition: opacity 0.8s;
  border-radius: 5px;
}

@keyframes spin-square {
  0% {
    transform: translate(-50%, -50%) rotateZ(0);
  }

  100% {
    transform: translate(-50%, -50%) rotateZ(-360deg);
  }
}

@keyframes spin-main {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}