/** * * * @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: plain-ui__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 plain-ui__loading-animation { 0% { height: 60px; } 50% { height: 40px; } 100% { height: 60px; } }