Progress bar with Tailwind CSS and Javascript

How to a create a scroll progress bar with Tailwind CSS and Javascript

This tailwind example is contributed by Michael Andreuzza, on 10-May-2024. Component is made with Tailwind v3.4. It is responsive.

Widget

Author Michael Andreuzza

Tailwind v3.4 3.2k 6

Fork Fullscreen

<section class="overflow-hidden relative">
 
 
 <div id="scroll-progress" class="bg-orange-600 h-1 fixed top-0 left-0 z-50"></div>
 
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24  relative p-8">
  <div class="prose text-gray-500 prose-sm  text-center prose-headings:font-normal prose-headings:text-xl mx-auto w-full">
   <div>
    <h1>Scroll progress bar</h1>
    <p class="text-balance">
     Scroll down to see the bar appear.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-xl mx-auto w-full">
   <div class="prose prose-sm 2xl:text-lg text-gray-500">
    <p>Brief Facts About Me</p>
    <p>
     In the throbbing heart of London's vibrant streets, amidst the
     colorful tapestry of the 1980s, I drew my first breaths at St
     Thomas’ Hospital Medical School. An intricate blend of European
     heritage defines my roots - my father's lineage tracing back to the
     rolling hills of Italy, while my mother embodies the fiery spirit of
     Spain.
    </p>
    <p>
     My upbringing was a harmonious fusion of the majestic landscapes of
     northern Italy and the sun-drenched shores of southern Spain. From
     the quaint cobblestone streets of Borgosesia, Vercelli, Italy, to
     the majestic coastal cliffs of Gorliz, Bilbao, and the tranquil
     beaches of Torrevieja, Alicante, Spain, my formative years were an
     immersive journey through diverse cultures and breathtaking scenery.
    </p>
    <p>
     Passion became my guiding star from a tender age; I found solace and
     expression in the elegant contours of automotive design, sketching
     visions of sleek machines that seemed to dance with the wind.
     Equally at home amidst the crashing waves, I became a lifelong
     devotee of the ocean, finding solace and exhilaration atop a
     surfboard.
    </p>
    <p>
     The melodies of different languages became my symphony; fluent in
     the cadences of Castilian Spanish, the eloquence of English, the
     lyrical beauty of Italian, and the melodious tones of Swedish, I
     effortlessly traversed linguistic boundaries.
    </p>
    <p>
     Summers bathed in the Mediterranean sun found me standing as a
     vigilant sentinel along the Spanish coast, serving as a lifeguard, a
     silent guardian of lives amidst the azure expanse. Driven by the
     thirst for adventure and discovery, I ventured to the lush
     landscapes of Harrogate in my twenties, lured by the mystique of
     British life and culture.
    </p>
    <p>
     Yet, the siren call of my ancestral lands beckoned, and I returned
     to the warm embrace of Spanish sunshine, seeking solace amidst the
     familiar lands I had missed. Relocating to Helsinki with my beloved
     wife in 2011, and now finding sanctuary in the tranquil beauty of
     the Åland Islands, I stand proudly as both a father and a devoted
     husband.
    </p>
    <p>
     Inspired by a simple tweak of my Android phone settings, I embarked
     on a journey into the realm of web development. Launching my
     inaugural project, Colors and Fonts, in 2018, I have since dedicated
     myself to the art of digital creation, constantly refining and
     expanding my digital footprint.
    </p>
    <p>
     Despite encountering challenges, including developing projects on a
     laptop with a failing screen, I persevered, ultimately seeing two
     projects acquired in 2022. Initiating ventures such as Lexington
     Themes and Windstatic, I officially unveiled them to the world in
     February 2023.
    </p>
    <p>
     Simplicity and clarity have always been the guiding principles of my
     design philosophy. Consistency, both in life and work, serves as my
     steadfast companion, guiding my approach to web development, project
     management, and personal growth.
    </p>
    <p>
     Reflecting on my journey from the varied landscapes of Italy and
     Spain to the burgeoning tech scene of the Åland Islands, I have
     embraced the challenges and opportunities that each transition
     brought forth. Fueled by an unwavering passion for design,
     development, and entrepreneurship, I march forward, with consistency
     as the cornerstone of my success. As I continue to explore new
     ventures and embark on creative endeavors, I remain steadfastly
     committed to the principles of simplicity and clarity that define
     both my work and life philosophy.
    </p>
    <p>
     Thank you for taking the time to acquaint yourself with my story. I
     am filled with anticipation for the adventures that lie ahead,
     eagerly anticipating the ongoing evolution of my projects and
     personal endeavors. May your day be filled with beauty and
     inspiration.
    </p>
    <p>Michael Andreuzza</p>
   </div>
  </div> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2 ">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to a create a scroll progress bar with Tailwind CSS and
       Javascript
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-scroll-progress-bar-with-tailwind-css-and-javascript" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/scroll-progress-bar/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

Simple count down timer

Gopi Yadav

3 years ago

15.6k
Weather Widget with 5-Day Forecast
A clean, modern weather widget built with HTML, Tailwind CSS, and vanilla JavaScript. Perfect for integrating weather information into any web project. Features: - Current weather display with temperature, conditions, and "feels like" temperature - 5-day forecast with daily highs and lows - Temperature unit toggle (Celsius/Fahrenheit) - Weather statistics including wind speed, humidity, and visibility - Fully responsive design that works on all screen sizes - Smooth hover animations and transitions - Semantic HTML5 structure for better accessibility and SEO - Schema.org structured data (JSON-LD) for rich snippets - No dependencies except Tailwind CSS CDN - Easy to customize with Tailwind utility classes Technical Details: - Markup: Semantic HTML5 with proper document structure - Styling: Tailwind CSS v3.x via CDN (utility-first approach) - JavaScript: Vanilla ES6+ (no frameworks or libraries required) - Accessibility: WCAG 2.1 compliant with ARIA labels, semantic elements, and keyboard navigation support - SEO Optimization: - Structured data using JSON-LD (Schema.org WeatherForecast type) - Open Graph and Twitter Card meta tags for social sharing - Semantic heading hierarchy (h1, h2) - Descriptive meta descriptions and keywords - Performance: Lightweight (~8KB HTML), minimal JavaScript, CSS loaded from CDN - Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge) - Mobile-First: Responsive grid layout with breakpoints for mobile, tablet, and desktop - **Customization:** Easily modify colors, layout, and data structure via Tailwind classes - State Management: Simple boolean toggle for temperature units with dynamic DOM updates - SVG Icons: Inline SVG graphics for weather conditions (scalable and customizable) API Integration Ready: The component uses mock data but is structured to easily integrate with weather APIs such as: - OpenWeatherMap - WeatherAPI - Visual Crossing - AccuWeather Simply replace the data object with your API response and map the fields accordingly.

Ijila Itunu

5 months ago

879
Code card with copy Button
this example uses clipboard.js to copy the code

Akmaljon Muhammadjonov

1 year ago

1.7k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Komal Jain

2 years ago

3k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Ameth Galarcio

2 years ago

3.3k
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Komal Jain

2 years ago

2.7k
Number counter input

Prem..

3 years ago

16.8k
Simple count down timer

Alfredo Pineda Hernández

3 years ago

10.5k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.3k
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.

Prashant

4 years ago

15.6k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

2 weeks ago

12
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k