Progress Nav – Animated Progress Bar to Highlight Current Section

Progress Nav is an animated progress bar that highlights sections of a page that are currently in view.

This page demonstrates an idea for how progress can be visualized inside of a standard page nav. Scroll the page and note how the marker animates to highlight all of the sections that are currently on screen.

The rest of the content below is taken from Take a look at that to see how the progress nav looks on a real page.

Created by Hakim El Hattab | | @hakimel


Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Keep your skills sharp, get informed.

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox