Spinners

index.html

<!--   
  css-doodle: 
  http://yuanchuan.name/css-doodle/  
-->

<css-doodle>
  :doodle {
    @grid: 15 / 61.8vmin;
    @shape: circle;
  }
  
  border-radius: 50%;
  border: calc(1px + .05vmin) 
    solid transparent;
   
  --r: @rand(360deg);
  --n: calc(
      @abs(@abs(@row() - 8) 
    + @abs(@col() - 8) - 15) / 15
  );
 
  transform: rotate(var(--r));
  border-left-color: hsl(
    calc(var(--n) * 360 + 120), 60%, 60%
  );
  
  animation: 
    spin calc(.6s / var(--n)) linear infinite;
  
  @keyframes spin {
    to { 
      transform: rotate(
        calc(var(--r) + @pick(1turn, -1turn))
      );
    }
  }
</css-doodle>

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/52982/css-doodle.v0.2.0.min.js"></script>

spinners.markdown

Spinners

css-doodle DEMO http://yuanchuan.name/css-doodle

A Pen by yuanchuan on CodePen.

License.

style.css

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #0a0c27; 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}