colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
51 lines (50 loc) • 1.29 kB
text/stylus
// {loading}
//
// Display an animated loader.
//
// It use [loading animation](section-animations.html#kssref-animations-loading).
//
// Live demo with [loading element](section-elements.html#kssref-elements-loading)
//
// Advice: use it in a pseudo element (`:before` or `:after`)
//
// **Usage**
// ```stylus
// /* my_file.styl */
// .foo
// {loading}
// ```
// will compile to
// ```css
// /* my_file.css */
// .foo::before {
// content: '';
// display: block;
// position: absolute;
// top: 50%;
// left: 50%;
// background: transparent;
// width: 1.2em;
// height: 1.2em;
// margin: -2.6em 0 0 -.6em;
// border-radius: 10em;
// box-shadow: -2em 2em 0 0 currentColor, 0 2em 0 0 currentColor, 2em 2em 0 0 currentColor;
// animation: loadingAnimate 1.4s infinite linear;
// }
// ```
//
// Styleguide: @blocks.Block.Loading
loading =
&:before
content ''
display block
position absolute
top 50%
left 50%
background transparent
width 1.2em
height 1.2em
margin -2.6em 0 0 -.6em
border-radius 10em
box-shadow -2em 2em 0 0 currentColor, 0 2em 0 0 currentColor, 2em 2em 0 0 currentColor
animation loadingAnimation 1.4s infinite linear