Dot indicators inside of a circle,

dabblet.css

/**
 * Dot indicators inside of a circle, 
   which rotate around the center of the parent circle
 */
body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
}

.circle {
  border-radius:50%;
  width:300px;
  height:300px;
  background:rgba(0,0,0,0.5);
  position:relative;
  left:100px;
}

.little-dots {
  position:relative;
  left:20px;
  top:150px;
}

.little-dots > span {
  padding:3px 3px;
  background:rgba(255,255,255,0.5);
  border-radius:50%;
  transform-origin:130px 0px;
  transition:all 0.2s ease-in;
  position:absolute;
  transform:rotate(0deg);
}
.little-dots > span.cur { background:white; }

.little-dots > span:nth-child(1) { transform:rotate(-385deg); }
.little-dots > span:nth-child(2) { transform:rotate(-390deg); }
.little-dots > span:nth-child(3) { transform:rotate(-395deg); }
.little-dots > span:nth-child(4) { transform:rotate(-400deg); }
.little-dots > span:nth-child(5) { transform:rotate(-365deg); }
.little-dots > span:nth-child(6) { transform:rotate(-370deg); }
.little-dots > span:nth-child(7) { transform:rotate(-375deg); }
.little-dots > span:nth-child(8) { transform:rotate(-380deg); }

dabblet.html

<div class="circle">
 <div class="little-dots">
  <span></span>  
  <span></span>
  <span></span>
  <span></span>
  <span class="cur"></span>
  <span></span>
  <span></span>
  <span></span>
 </div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}