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

Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

S. Patel

3 years ago

10.3k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

1.9k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

6 months ago

954
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

dev-fab250

1 year ago

2.4k
Interactive Kanban Board
Kanban board with draggable tasks

Quentin Rivers

1 year ago

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
Sticky fullpage pages / slides
Sticky full page

harinandana

11 months ago

1k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Ameth Galarcio

2 years ago

3k
Number counter input

Prem..

3 years ago

16.7k
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
Simple count down timer

Gopi Yadav

3 years ago

15.5k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k