Circle css loader

circle-css-loader.markdown

Circle css loader

A Pen by Дмитрий on CodePen.

License.

index.html

<div class="cover">
  loading
  <div class="rotate left">
        <div class="pin"></div>
    </div>
    <div class="rotate">
        <div class="pin"></div>
    </div>
</div>

style.sass

$line_width: 20px
$block_width: 100px
$block_height: 100px

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content
  
=vendor-prefix($name, $argument)
  -webkit-#{$name}: #{$argument}
  -ms-#{$name}: #{$argument}
  -moz-#{$name}: #{$argument}
  -o-#{$name}: #{$argument}
  #{$name}: #{$argument}
  
.cover
  border-radius: 50%
  color: #fff
  text-align: center
  margin: $line_width
  width: $block_width
  height: $block_height
  background: red
  position: relative
  > span, &:after
    display: inline-block
    vertical-align: middle
  &:after
    content: ''
    height: 100%

.rotate
  position: absolute
  top: -$line_width
  left: -$line_width
  bottom: -$line_width
  right: -$line_width
  font-size: 0px
  &, & .pin
    clip: rect(0px, ($block_width / 2) + $line_width, $block_height + 2*$block_height, 0px)
  .pin 
    position: absolute
    border: $line_width solid rgba(255,255,0,.9)
    width: $block_width 
    height: $block_height 
    border-radius: 50%
    +vendor-prefix(animation, rota 2s infinite linear)
  &.left, &.left .pin
    clip: rect(0px, $block_width + 2*$line_width, $block_height + 2 * $line_width, $block_width / 2 + $line_width)
    .pin 
      +vendor-prefix(animation, rotas 2s infinite linear)

+keyframes(rotas)
  0%
    +vendor-prefix(transform, rotate(-180deg))
  50%, 100%
    +vendor-prefix(transform, rotate(0deg))

+keyframes(rota)
  0%, 50% 
    +vendor-prefix(transform, rotate(-180deg))
  100%
    +vendor-prefix(transform, rotate(0deg))