Tailwind progress bars

Responsive progress bars built with Tailwind. Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.


Basic example

1
2
3
4
<div class="relative pt-1">
  <div class="overflow-hidden h-2 text-xs flex rounded bg-purple-200">
  </div>
</div>

Filled

1
2
3
4
5
6
7
<div class="relative pt-1">
  <div class="overflow-hidden h-2 text-xs flex rounded bg-purple-200">
      <div style="width:30%"
          class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500">
      </div>
  </div>
</div>

Multiple colors

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="relative pt-1">
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200">
      <div style="width: 10%"
          class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-900">
      </div>
      <div style="width: 15%"
          class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-600">
      </div>
      <div style="width: 25%"
          class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-300">
      </div>
  </div>
</div>

With badge

Task in progress
0%
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="relative pt-1">
  <div class="flex mb-2 items-center justify-between">
      <div>
          <span
              class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200">
              Task in progress
          </span>
      </div>
      <div class="text-right">
          <span class="text-xs font-semibold inline-block text-purple-600">
              0%
          </span>
      </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200">
  </div>
</div>

Filled and with badge

Task in progress
30%
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="relative pt-1">
  <div class="flex mb-2 items-center justify-between">
    <div>
      <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200">
        Task in progress
      </span>
    </div>
    <div class="text-right">
      <span class="text-xs font-semibold inline-block text-purple-600">
        30%
      </span>
    </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200">
    <div style="width:30%"
      class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500">
    </div>
  </div>
</div>

Filled, with badge and multiple colors

Task in progress
50%
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="relative pt-1">
  <div class="flex mb-2 items-center justify-between">
    <div>
      <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200">
        Task in progress
      </span>
    </div>
    <div class="text-right">
      <span class="text-xs font-semibold inline-block text-purple-600">
        50%
      </span>
    </div>
  </div>
  <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200">
    <div style="width: 10%"
      class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-900">
    </div>
    <div style="width: 15%"
      class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-600">
    </div>
    <div style="width: 25%"
      class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-200">
    </div>
  </div>
</div>