DEV Community


Interesting header progress navbar in

Web developer in Longbridge
・1 min read

Alt Text

Found Interesting things when you click a link in you will see a colorful progress navbar grow width it's so cool.

I just inspect how implement it. let's show code i have found:

First defined html dom like this

<div class="navigation-progress showing" id="navigation-progress"></div>

Then use css *animate attributes

// defined background with linear-gradient 
.navigation-progress {
    position: fixed;
    top: 0;
    background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
    z-index: 102;
    height: var(--su-1);
    width: 0%;
// play animation when navigation-progress dom added showing class
.navigation-progress.showing {
    display: block;
    width: 140%;
    -webkit-animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;
    animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;

// define keyframes
@keyframes grow-width {
  from {
    width: 0;
  to {
    width: 100%;

These CSS defined animation grow-width will infinite play until page loaded.

Hope it can help you :) Demo

Discussion (0)

Forem Open with the Forem app