You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.1 KiB
52 lines
1.1 KiB
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
$plain-ui__loading__background-color: $plain-ui__danger-light !default;
|
|
|
|
@mixin plain-ui__component__loading()
|
|
{
|
|
.loading {
|
|
height: 60px;
|
|
width: 47px;
|
|
margin: 0 auto;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
display: block;
|
|
width: 15px;
|
|
height: 80px;
|
|
|
|
background: $plain-ui__loading__background-color;
|
|
|
|
animation-name: plain-ui__loading-animation;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: infinite;
|
|
|
|
animation-delay: 0.15s;
|
|
|
|
border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
|
|
border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);
|
|
|
|
&:first-child {
|
|
margin-right: 1px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-left: 1px;
|
|
animation-delay: 0.3s;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes plain-ui__loading-animation {
|
|
0% { height: 60px; }
|
|
50% { height: 40px; }
|
|
100% { height: 60px; }
|
|
}
|
|
} |