Coffee Shop Loader

HTML
<main role='main'> <div aria-busy='true' data-text='Coffee Shop' role='progressbar'> </div> </main>
SCSS
$text-background: rgba(255, 255, 255, 1); $text-colour: #755638; [role="progressbar"] { position: relative; &::before, &::after { display: block; height: 120px; font-family: 'Bevan', cursive; font-size: 6em; content: attr(data-text); } &::before { color: $text-colour; } &::after { display: block; position: absolute; top: 0; left: 0; z-index: 2; color: $text-background; overflow: hidden; } } [role="progressbar"][aria-busy="true"]::after { animation: load ease-out 8s infinite; } @keyframes load { 0%, 10%, 100% { height: 0; } 90% { height: 120px; } } html, body { margin: 0; padding: 0; height: 100%; } body { display: flex; align-items: center; justify-content: center; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/school.png); }
JAVASCRIPT
Expand for more options Login