Shadcn.io is not affiliated with official shadcn/ui
Footer Progress Bar
A React reading progress footer block for Next.js with animated percentage bar indicator, two link columns, and copyright using shadcn/ui and Tailwind CSS
Show readers exactly how far they have scrolled. This React footer leads with a static reading progress indicator displaying a "75% read" label alongside an animated bar that fills to the progress width. Two organized link columns provide standard site navigation below, and a copyright bar anchors the bottom. Built with framer-motion animated width transitions, react-wrap-balancer for balanced typography, and Tailwind CSS. Ideal for long-form articles, documentation pages, online courses, and knowledge base sites where progress indication encourages readers to complete content and reduces bounce rates.
Related Components
Back to Top Footer
Footer with scroll-to-top button
Newsletter Footer
Footer with email signup
Minimal Footer
Clean minimal footer
CTA Footer
Footer with call-to-action
Company Footer
Footer with brand story
Multi-Column Footer
Footer with multiple link columns
FAQ
Was this page helpful?
Sign in to leave feedback.
Product Showcase
A product showcase footer block for React and Next.js with three featured products, icon highlights, three navigation columns, and copyright built with shadcn/ui and Tailwind CSS
Real Estate
A React real estate footer block for Next.js with three navigation columns, licensed badge, Equal Housing notice, and copyright using shadcn/ui and Tailwind CSS