Clock spinner

Clock spinner.markdown

Clock spinner

A Pen by Andrew Liebchen on CodePen.

License.

index.html

<div class="clock">
  <div class="hand minute"></div>
  <div class="hand hour"></div>
</div>

style.css

@import "bourbon";

body {
  background-color: #F0F0F0;
}

* {
  @include box-sizing(border-box);
}

// Define the clock and hands

$clock-size: 100px;
$clock-color: black;
$clock-background: white;
$clock-speed: 1s;
$hand-width: 10px;

.clock {
  @include size($clock-size);
  background-color: $clock-background;
  box-shadow: inset 0 10px 0 rgba($clock-color, 0.1);
  border: $hand-width solid $clock-color;
  border-radius: $clock-size / 2;
  position: relative;
  
  &::before {
    $size: $hand-width + 2px;
    $margin: -($size / 2);
    @include size($size);
    @include position(absolute, 50% 0 0 50%);
    background-color: $clock-color;
    border-radius: $size / 2;
    content: "";
    margin: $margin 0 0 $margin;
    z-index: 1;
  }
}

.hand {
  @include animation-name(hand);
  @include animation-iteration-count(infinite);
  @include animation-timing-function(linear);
  width: $hand-width;
  background-color: $clock-color;
  border-radius: $hand-width / 2;
  margin-left: -($hand-width / 2);
  
  &.minute {
    @include animation-duration($clock-speed);
    @include transform-origin(center bottom);
    @include position(absolute, $hand-width*0.5 0 0 50%);
    height: $clock-size / 2 - $hand-width * 1.5;
  }
  
  &.hour {
    @include animation-duration($clock-speed * 12);
    @include transform-origin(center bottom);
    @include position(absolute, $hand-width*1.5 0 0 50%);
    height: $clock-size / 2 - $hand-width * 2.5;
  }
}

// Clock animation

@include keyframes(hand) {
  from {
    @include transform(rotate(0deg));
  }
  to {
    @include transform(rotate(360deg));
  }
}