body {
background-color: #fefefe;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
align-items: center;
}
.background1 {
width: fit-content;
height: fit-content;
font-weight: bold;
font-size: 30px;
padding: 8px 5px;
background: repeating-linear-gradient(90deg, currentColor 0 8%, #0000 0 10%) 200% 100% / 200% 3px no-repeat;
animation: step1 2s steps(6) infinite;
}
.background1::before {
content: 'Loading...'
}
@keyframes step1 {
to {
background-position: 80% 100%
}
}
.background2 {
width: 200px;
height: 200px;
background: repeating-linear-gradient(90deg, grey 0 10%, skyblue 10% 20%, bisque 20% 30%, #0000 30% 40%) repeat;
}
.background3 {
width: fit-content;
font-weight: bold;
font-size: 30px;
color: goldenrod;
padding: 8px 5px;
background: repeating-linear-gradient(to right, currentcolor 0 10%, #0000 10% 12.5%) 200% 100% / 200% 3px no-repeat;
animation: step2 2s steps(5, jump-end) infinite;
}
.background3::after {
content: 'Loading...'
}
@keyframes step2 {
to {
background-position: 75% 100%;
}
}
.background4 {
width: fit-content;
height: 50px;
font-weight: bold;
font-family: monospace;
font-size: 30px;
clip-path: inset(0 3ch 0 0);
padding: 8px 5px;
animation: step3 1s steps(4) infinite;
}
.background4::before {
content: 'Loading...'
}
@keyframes step3 {
to {
clip-path: inset(0 -1ch 0 0);
}
}