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.
|
|
|
/**
|
|
|
|
* <div class="loading">
|
|
|
|
* <span></span>
|
|
|
|
* <span></span>
|
|
|
|
* <span></span>
|
|
|
|
* </div>
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @author Björn Hase, Tentakelfabrik
|
|
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
|
|
* @link https://github.com/tentakelfabrik/plain-ui
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
.loading {
|
|
|
|
height: 60px;
|
|
|
|
width: 47px;
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
span {
|
|
|
|
display: block;
|
|
|
|
width: 15px;
|
|
|
|
height: 80px;
|
|
|
|
|
|
|
|
background-color: var(--background);
|
|
|
|
|
|
|
|
animation-name: loading-animation;
|
|
|
|
animation-duration: 0.5s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
|
|
|
animation-delay: 0.15s;
|
|
|
|
|
|
|
|
border-top: 1px solid var(--background);
|
|
|
|
border-bottom: 1px solid var(--background);
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
margin-right: 1px;
|
|
|
|
animation-delay: 0s;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-left: 1px;
|
|
|
|
animation-delay: 0.3s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes loading-animation {
|
|
|
|
0% { height: 60px; }
|
|
|
|
50% { height: 40px; }
|
|
|
|
100% { height: 60px; }
|
|
|
|
}
|