Build 3 Scroll Progress Indicators in React & Tailwind CSS (No Libraries!)

Published: 16 February 2026
on channel: Web Dev Bey

245

In this video, we're building 3 different scroll progress indicators
from scratch using React and Tailwind CSS — no external libraries needed!

TIMESTAMPS:
00:00 — Intro
00:25 — Building a Custom React Hook (useScrollProgress)
08:25 — Top Progress Bar Component with Tailwind CSS
12:57 — Circular Progress Indicator with SVG in React
22:53 — Reading Progress Bar Component in React
31:02 — Putting It All Together in App.jsx
48:16 — Final Result, Testing & Outro

Source Code:
https://github.com/WebDevBey/react-sc...

Buy Me a Coffee:
https://ko-fi.com/webdevbey

Contact Me:
contact.webdevbey@gmail.com

Support via PayPal:
https://paypal.me/WebDevBey

Like the video and subscribe for more content!

Watch My Previous Video:
• Build a Color Palette Generator with React...

#react #coding #webdevelopment

On this page of the site you can watch the video online Build 3 Scroll Progress Indicators in React & Tailwind CSS (No Libraries!) with a duration of hours minute second in good quality, which was uploaded by the user Web Dev Bey 16 February 2026, share the link with friends and acquaintances, this video has already been watched 245 times on youtube and it was liked by 17 viewers. Enjoy your viewing!

13,624

228