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);
}
