Home
Michael Andreuzza
Progress bar with Tailwind CSS and Javascript

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

Widget

Author Michael Andreuzza

1.4k

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

Author:
Gopi Yadav

2 years ago

14.1k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

3 days ago

54
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

1 year ago

16.6k
pages / slides

Author:
MD Fardous Alom

1 week ago

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Komal Jain

6 months ago

1.2k
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

Author:
Ameth Galarcio

6 months ago

1.4k
Music Player

Author:
Abhijit Sen

2 years ago

15.4k
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

2 years ago

13.7k
Interactive Kanban Board
Kanban board with draggable tasks

Author:
Quentin Rivers

3 months ago

516
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

12.9k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Author:
Jerome Soriano

3 months ago

713

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components