Home
Freja Jensen
Working reading progress bar

Working reading progress bar

show how much of the page has been scrolled

This tailwind example is contributed by Freja Jensen, on 09-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Progress Bar Widget

Author Freja Jensen

12.9k

Fork Fullscreen

<div>
    <div class="max-w-4xl mx-auto p-8">
        <h1 class="text-4xl font-bold mb-8">Scroll to view effect</h1>
        <div class="flex items-center mb-6">
            <div class="h-8 w-8 rounded-full bg-gray-400 mr-4"></div>
            <div>
                <div class="h-2 w-24 bg-gray-400 mb-1"></div>
                <div class="h-2 w-16 bg-gray-400"></div>
            </div>
        </div>
        <p class="text-lg leading-8 mb-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies dui ac suscipit vestibulum.
            Pellentesque euismod turpis vel sapien bibendum, non faucibus justo placerat. In hac habitasse platea
            dictumst. Morbi id tincidunt elit. Praesent consectetur eleifend mi, vitae gravida ante fringilla quis. Duis
            maximus, erat metus interdum eros, in rhoncus leo augue quis quam. Sed rhoncus consequat ipsum, vel egestas
            leo congue eu.
        </p>
        <p class="text-lg leading-8 mb-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies dui ac suscipit vestibulum.
            Pellentesque euismod turpis vel sapien bibendum, non faucibus justo placerat. In hac habitasse platea
            dictumst. Morbi id tincidunt elit. Praesent consectetur eleifend mi, vitae gravida ante fringilla quis. Duis
            maximus, erat metus interdum eros, in rhoncus leo augue quis quam. Sed rhoncus consequat ipsum, vel egestas
            leo congue eu.
        </p>
        <p class="text-lg leading-8 mb-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies dui ac suscipit vestibulum.
            Pellentesque euismod turpis vel sapien bibendum, non faucibus justo placerat. In hac habitasse platea
            dictumst. Morbi id tincidunt elit. Praesent consectetur eleifend mi, vitae gravida ante fringilla quis. Duis
            maximus, erat metus interdum eros, in rhoncus leo augue quis quam. Sed rhoncus consequat ipsum, vel egestas
            leo congue eu.
        </p>
        <p class="text-lg leading-8 mb-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies dui ac suscipit vestibulum.
            Pellentesque euismod turpis vel sapien bibendum, non faucibus justo placerat. In hac habitasse platea
            dictumst. Morbi id tincidunt elit. Praesent consectetur eleifend mi, vitae gravida ante fringilla quis. Duis
            maximus, erat metus interdum eros, in rhoncus leo augue quis quam. Sed rhoncus consequat ipsum, vel egestas
            leo congue eu.
        </p>
        <p class="text-lg leading-8 mb-20">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies dui ac suscipit vestibulum.
            Pellentesque euismod turpis vel sapien bibendum, non faucibus justo placerat. In hac habitasse platea
            dictumst. Morbi id tincidunt elit. Praesent consectetur eleifend mi, vitae gravida ante fringilla quis. Duis
            maximus, erat metus interdum eros, in rhoncus leo augue quis quam. Sed rhoncus consequat ipsum, vel egestas
            leo congue eu.
        </p>

</div>
</div>

Related Examples

Article progress bar with tailwind only
On javascript needed

Author:
Samuel Dawson

2 years ago

9.5k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

3 years ago

14.7k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

21.8k
Music Player

Author:
Abhijit Sen

2 years ago

17.2k
Gradient progress bar

Author:
Kofi Osei

2 years ago

15k
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.5k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

3 years ago

14.1k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

423
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

7 months ago

956
Responsive Progress Bar
This progress bar visually represents proficiency in Web Design, showing an 85% skill level. The text labels above indicate the skill area on the left and the percentage on the right for easy interpretation.

Author:
Anum Shahana

1 year ago

1.4k
Simple count down timer

Author:
Gopi Yadav

2 years ago

15k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components