Skip to content

Instantly share code, notes, and snippets.

@alexTitakoff
Created September 13, 2022 19:31
Show Gist options
  • Save alexTitakoff/16279dc846f12561c69332e8005598a3 to your computer and use it in GitHub Desktop.
Save alexTitakoff/16279dc846f12561c69332e8005598a3 to your computer and use it in GitHub Desktop.
Circle css loader
<div class="cover">
loading
<div class="rotate left">
<div class="pin"></div>
</div>
<div class="rotate">
<div class="pin"></div>
</div>
</div>
$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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment