Article progress bar with tailwind only

On javascript needed

This tailwind example is contributed by Samuel Dawson, on 24-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Progress Bar

Author Samuel Dawson

Tailwind v3.4 10.5k 13

Fork Fullscreen

<div
 class="p-8 relative z-10 flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 bg-gradient-to-tr from-pink-500 bg-[length:100%_calc(100%-100vh+5px)] bg-no-repeat py-6 [--tw-gradient-to:rgb(255_255_255)50%] [--tw-gradient-from:rgb(236_72_153)50%] after:fixed after:inset-0 after:top-1.5 after:-z-10 after:bg-white sm:py-12">
 Scroll to see effect
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua.
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Related Examples

Working reading progress bar
show how much of the page has been scrolled

Freja Jensen

3 years ago

13.4k
Progress Bar
Simple Progress bar

Prajwal Hallale

4 years ago

10.7k
Gradient progress bar

Kofi Osei

3 years ago

15.8k
Simple progress bar component

Prajwal Hallale

3 years ago

7.8k
Progress Bar
Simple Progress bar

anjali pandith

2 years ago

6.5k
Progress bars

Sophia Baker

3 years ago

11.4k
progress bar

Md. Tofayel islam

1 year ago

1.6k
Progress bar

Rajesh Maheshwari

1 year ago

1.6k
Responsive Progress bars

Anum Shahana

1 year ago

1.9k
Progress spinner

Md. Tofayel islam

2 years ago

3.2k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Walid Ahmad

1 year ago

1.8k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

448