YouTube-like page loading bar animation in CSS

Sat 04, Jan 2020 css webdev

Thought this might be worth sharing.

The animation

I just figured out how to create that YouTube loading bar at the top of the page. It's actually really simple! Here's how:

The HTML is just one element:

<div class="anim"></div>

The CSS:

html,
body {
    z-index: 0;
    margin: 0 auto;
}

.anim {
    z-index: 1000;
    animation-name: fill;
    animation-duration: 1s;
    background-color: red;
}

@keyframes fill {
    0% {
        width: 0%;
        padding: 2px;
    }

    75% {
        width: 100%;
        padding: 2px;
    }

    100% { padding: 0px; }
}

Back to top