82 lines
1.5 KiB
Stylus
82 lines
1.5 KiB
Stylus
// Tâmia © 2013 Artem Sapegin http://sapegin.me
|
||
// Spinner
|
||
// Based on http://codepen.io/beben-koben/pen/JcGnK
|
||
|
||
spinner_fallback_gif ?= false
|
||
loader_shade_color ?= white(.8)
|
||
|
||
|
||
@keyframes spinner-rotate
|
||
0%
|
||
transform: rotate(0deg)
|
||
100%
|
||
transform: rotate(360deg)
|
||
|
||
|
||
// Regular spinner
|
||
.spinner,
|
||
.loader
|
||
display: inline-block
|
||
width: .25em
|
||
height: .25em
|
||
margin: .5em .2em
|
||
opacity: .7
|
||
border-radius: 50%
|
||
font-size: 16px
|
||
box-shadow: 0 -.4em 0 0 rgba(0,0,0,1), -.28em -.28em 0 0 rgba(0,0,0,.75), -.4em 0 0 0 rgba(0,0,0,.5), -.28em .28em 0 0 rgba(0,0,0,.25)
|
||
|
||
&_big
|
||
font-size: 32px
|
||
|
||
|
||
// Loader
|
||
.loader
|
||
visibility: hidden
|
||
opacity: 0
|
||
transition: visibility 0s .3s, opacity .3s ease-out
|
||
|
||
.is-loading &
|
||
visibility: visible
|
||
opacity: 1
|
||
transition: opacity .5s ease-out
|
||
|
||
|
||
// Enable animation only when spinner is visible to increase page performance
|
||
.spinner,
|
||
.is-loading .loader
|
||
animation: .85s spinner-rotate steps(9) infinite
|
||
|
||
.spinner.is-hidden,
|
||
.loader.is-hidden
|
||
animation: none
|
||
|
||
|
||
// Loader shade
|
||
.loader-wrapper
|
||
position: relative
|
||
|
||
.loader-shade
|
||
position: absolute
|
||
top: 0
|
||
left: 0
|
||
width: 100%
|
||
height: 100%
|
||
opacity: 0
|
||
background: loader_shade_color
|
||
border-radius: inherit
|
||
z-index: 99999
|
||
transition: opacity .15s ease-out
|
||
|
||
.is-loading &
|
||
opacity: 1
|
||
|
||
|
||
// Fallback GIF image for browsers that don’t support CSS animations
|
||
if spinner_fallback_gif
|
||
.no-cssanimations .spinner
|
||
width: 16px
|
||
height: 16px
|
||
margin: 0
|
||
opacity: 1
|
||
background: url(spinner_fallback_gif)
|