Home
Samuel Dawson
Article progress bar with tailwind only

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 CSS v3. It is responsive.

Progress Bar

Author Samuel Dawson

9.7k

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

Author:
Freja Jensen

3 years ago

13k
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.6k
Gradient progress bar

Author:
Kofi Osei

3 years ago

15.4k
Simple progress bar component

Author:
Prajwal Hallale

2 years ago

7.7k
Progress Bar
Simple Progress bar

Author:
anjali pandith

2 years ago

5.9k
Gradient progress bar
A progress bar with gradient

Author:
Dujardin Emmanuel

10 months ago

578
loader
loader

Author:
Ganesh Salunke

2 weeks ago

29
Portfolio About & Skills

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.4k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.9k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

947
Progress bar

Author:
Rajesh Maheshwari

1 year ago

1.2k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components