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.
plain-ui/src/scss/components/_loading.scss

55 lines
1.1 KiB

/**
* <div class="loading">
* <span></span>
* <span></span>
* <span></span>
* </div>
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
.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; }
}