Skip to content

Instantly share code, notes, and snippets.

@dbasilioesp
Created December 12, 2014 12:06
Show Gist options
  • Save dbasilioesp/cd33df9507c41773536e to your computer and use it in GitHub Desktop.
Save dbasilioesp/cd33df9507c41773536e to your computer and use it in GitHub Desktop.
Spinner Fill
// <div class="spinner-css">
// <span class="side sp_right">
// <span class="fill"></span>
// </span>
// <span class="side sp_left">
// <span class="fill"></span>
// </span>
// <span class="spinner-css-loading"></span>
// </div>
// Variables Spinner
$color_bg: #fff
$color_border_spinner: #09C
$size_spinner: 22px
$size_border_spinner: 4px
$time_loop: 57s
$interation_count: 1
.spinner-css
position: relative
height: $size_spinner
width: $size_spinner
+border-radius(50%)
float: right
margin-top: 12px
.spinner-inner-cover
position: absolute
width: $size_spinner - $size_border_spinner
height: $size_spinner - $size_border_spinner
left: 0px
top: 0px
margin: $size_border_spinner / 2
background: $color_bg
opacity: 0
z-index: 100
+border-radius(999px)
+animation(reveal .1s $time_loop forwards)
.side
height: $size_spinner
width: $size_spinner / 2
position: absolute
overflow: hidden
background: dimgray
top: 0
> .fill
position: absolute
width: $size_spinner
height: $size_spinner
background: $color_border_spinner
+border-radius(50%)
&.sp_right
left: $size_spinner / 2
+border-radius(0px 999px 999px 0px)
> .fill
right: 0
border-right: $size_spinner / 2 solid $color_bg
+animation(cssSpinnerRight $time_loop $interation_count linear, occult .1s $time_loop forwards)
&.sp_left
left: 0
+border-radius(999px 0px 0px 999px)
> .fill
left: 0
border-left: $size_spinner / 2 solid $color_bg
+animation(cssSpinnerLeft $time_loop $interation_count linear, occult .1s $time_loop forwards)
.spinner-css-loading
width: $size_spinner
height: $size_spinner
position: absolute
border-radius: 50%
border-right: solid 2px #eee
border-top: solid 2px $color_border_spinner
background: #eee
box-shadow: 0 0 0 1px #eee
opacity: 0
+animation(spin 800ms $time_loop linear infinite, reveal .1s $time_loop forwards)
+keyframes(spin)
0%
+transform(rotate(0deg))
100%
+transform(rotate(360deg))
+keyframes(reveal)
0%
opacity: 0
100%
opacity: 1
+keyframes(occult)
0%
opacity: 1
100%
opacity: 0
+keyframes(cssSpinnerRight)
0%
+transform(rotate(0deg))
25%
+transform(rotate(90deg))
35%
+transform(rotate(180deg))
100%
+transform(rotate(180deg))
+keyframes(cssSpinnerLeft)
0%
+transform(rotate(0deg))
35%
+transform(rotate(0deg))
70%
+transform(rotate(90deg))
100%
+transform(rotate(180deg))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment