iTunes Style Play Button

player.html

<div class="player">
    <button class="button-play ion-stop">
      <div class="play-crop" data-anim="play-base play-crop">
        <div class="play-circle" data-anim="play-base play-left"></div>
        <div class="play-circle" data-anim="play-base play-right"></div>
      </div>
    </button>
</div>

player.scss

// Based on http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
// Using Ionic Play/Stop Buttons

.player {
  position: relative;

  $duration: 30;
  $circle: 30px;
  $border: 3px;
  $circle-crop: $circle + ($border * 2);

  .button-play {
    width: $circle;
    height: $circle;
    position: relative;
    color: $light-text;
    font-size: 10px;
    border-radius: 100%;
    border: 1px solid $light-text;
    background: none;
  }
  .ion-play {
    &:before {
      left: 1px;
      top: 1px;
      position: relative;
      font-size: 12px;
    }
  }
  .ion-stop {
    &:before {
      font-size: 10px;
    }

    .play-crop {
      position: absolute;
      top: -($border / 2);
      left: -($border / 2);
      width: $circle-crop;
      height: $circle-crop;
      clip: rect(0px, $circle, $circle, ($circle / 2));
    }
    .play-circle {
      width: $circle;
      height: $circle;
      border: $border solid $light-text;
      border-radius: 100%;
      position: absolute;
      clip: rect(0px, ($circle / 2), $circle, 0px);
    }
    div[data-anim~=play-base] {
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-timing-function:linear;
    }
    .play-crop[data-anim~=play-crop] {
      animation-duration: 0.01s;
      animation-delay: #{$duration / 2}s;
      animation-name: play-crop;
    }
    .play-circle[data-anim~=play-left] {
      animation-duration: #{$duration}s;
      animation-name: play-left-spin;
    }
    .play-circle[data-anim~=play-right] {
      animation-duration: #{$duration / 2}s;
      animation-name: play-right-spin;
    }

  }

}