Tailwind CSS Simple Progress Bar Examples

In this tutorial we will see simple Progress Bar UI, Progress Bar With Percentage count, Progress Bar With Animation, Progress Bars Gradients! Color, examples with Tailwind CSS.


Tool Use

Tailwind CSS 2.x



Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM


Example 1

Simple Progress Bar

<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-1/4 h-full bg-gray-500"></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-2/4 h-full bg-green-500"></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-3/4 h-full bg-red-500"></div>
</div>



Example 2

Simple Progress Bar With Percentage count

<div class="w-full bg-gray-100">
    <div class="py-0.5 text-xs text-center text-white bg-gray-500 w-1/4">25%</div>
</div>
<div class="w-full bg-gray-100">
    <div class="py-0.5 text-xs text-center text-white bg-green-500 w-2/4">50%</div>
</div>
<div class="w-full bg-gray-100">
    <div class="py-0.5 text-xs text-center text-white bg-red-500 w-3/4">75%</div>
</div>


Example 3

Progress Bar With Animation

<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-1/4 h-full bg-gray-500 animate-pulse"></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-2/4 h-full bg-green-500 animate-pulse"></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-3/4 h-full bg-red-500 animate-pulse"></div>
</div>



Example 4

Progress Bars Gradients! Color

<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-1/4 h-full bg-gradient-to-br from-gray-500 to-gray-800 "></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-2/4 h-full bg-gradient-to-br from-green-500 to-green-800"></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-3/4 h-full bg-gradient-to-br from-red-500 to-red-800"></div>
</div>


More Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs