Permalink
Fetching contributors…
Cannot retrieve contributors at this time
76 lines (62 sloc) 1.83 KB
/// Global namespace for loader component
/// @access public
/// @group loader
/// @type string
$DBloadingindicator-namespace: "c-loader";
/// Color for loader component
/// @access public
/// @group loader
/// @type color
$DBloadingindicator-color: color(gray, dark);
/// Size of loader component
/// @access public
/// @group loader
/// @type number
$DBloadingindicator-size: 6px;
/// Animation speed of loader component
/// @access public
/// @group loader
/// @type number
$DBloadingindicator-speed: 0.9s;
// Loading indicator component
// @example html
// <div class="c-loader">Loading...</div>
.#{$DBloadingindicator-namespace} {
display: inline-block;
position: relative;
width: $DBloadingindicator-size;
height: $DBloadingindicator-size;
margin: ($DBloadingindicator-size * 2) 0;
font-size: 0;
color: transparent;
border-radius: 100%;
background-color: rgba($DBloadingindicator-color, 0.3);
&, &:after, &:before {
animation: loaderFade $DBloadingindicator-speed ease-in-out infinite;
}
&:after, &:before {
content: "";
vertical-align: middle;
position: absolute;
left: 100%;
width: $DBloadingindicator-size;
height: $DBloadingindicator-size;
margin-left: round($DBloadingindicator-size * 0.6);
border-radius: 100%;
background-color: rgba($DBloadingindicator-color, 0.3);
animation-delay: ($DBloadingindicator-speed / 3);
}
&:after {
left: 200%;
margin-left: (round($DBloadingindicator-size * 0.3) + $DBloadingindicator-size);
animation-delay: (($DBloadingindicator-speed / 3) * 2);
}
}
@keyframes loaderFade {
50% {
background-color: rgba($DBloadingindicator-color, 1);
}
0%, 100% {
background-color: rgba($DBloadingindicator-color, 0.3);
}
}