<div id="rainbow-progress-bar"></div>
<div class="lab-container">
<div class="lab-intro">
<p>↑ Notice the animated bar at the top. ↑</p>
<p>This is a pure CSS-based animation, which you can hook with JavaScript to create interactive loading for your pages.</p>
</div>
</div>
:root {
--accent: #546de5;
}
.lab-container {
min-height: 80dvh;
display: grid;
place-items: center;
}
.lab-intro {
max-width: 40rem;
text-align: center;
font-size: 1.1rem;
}
@keyframes rainbow {
0% { background-position: 0 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
#rainbow-progress-bar {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px; /* Width is 100% by default due to position absolute/left/right */
/* Set a large width to allow the gradient to "scroll" */
background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 800% 100%;
animation: rainbow 9s ease infinite;
}