Permalink
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (119 sloc) 2.78 KB
// @page Pattern Library/Components
// @name Loader
//
// @description
// Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.
// `.us-loader--loading` will initiate the animation and `.us-loader--centered` will vertically center the loading SVG.
//
// @markup
// <div class='us-loader__container'>
// <div class='us-loader us-loader--loading us-loader--centered'>
// <div class='us-loader__inner'>
// <div class='us-loader__spinner'></div>
// <div class='us-loader__text'>
// Loading deals
// </div>
// </div>
// <div class='us-loader__overlay'></div>
// </div>
// <!-- EXAMPLE CONTENT -->
// <ul class='us-list'>
// <li><a href="#">List item 1</a></li>
// <li><a href="#">List item 2</a></li>
// <li><a href="#">List item 3</a></li>
// <li><a href="#">List item 4</a></li>
// </ul>
// <!-- END EXAMPLE -->
// </div>
$loader-overlay-opacity: .8 !default;
$loader-overlay-colour: #fff !default;
$spinner-vertical-margin: 1em !default;
$spinner-animation-time: 500ms !default;
$spinner-file: "icons/spinner.svg" !default;
$spinner-size: 60px !default;
@keyframes loader-intro {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
%snap-to-parent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
%spinner-base {
position: relative;
z-index: 2;
display: inline-block;
margin-top: $spinner-vertical-margin;
margin-bottom: $spinner-vertical-margin;
background-repeat: no-repeat;
}
%spinner-icon {
background: transparent inline-svg($spinner-file) no-repeat center center;
animation: spin $spinner-animation-time infinite linear;
}
@mixin spinner($size: $spinner-size) {
@extend %spinner-base;
@extend %spinner-icon;
@if $size {
width: $size;
height: $size;
background-size: $size;
}
}
.us-loader {
@extend %snap-to-parent;
z-index: 1;
display: none;
text-align: center;
}
.us-loader__container {
position: relative;
}
.us-loader--loading {
display: block;
animation: loader-intro $spinner-animation-time forwards;
}
.us-loader--centered {
@extend %vertical-align-parent;
transform-style: preserve-3d;
}
.us-loader__inner {
position: relative;
z-index: 2;
.us-loader--centered & {
@extend %vertical-align-child;
}
}
.us-loader__spinner {
.us-loader--loading & {
@include spinner;
}
.us-loader--centered & {
margin-top: 0;
}
}
.us-loader__text {
@extend %heading-3;
color: $c-navy;
}
.us-loader__overlay {
@extend %snap-to-parent;
z-index: 1;
background-color: $loader-overlay-colour;
opacity: $loader-overlay-opacity;
}