Tailwind CSS Progress

Our Tailwind CSS progress component can be used to show a user how far along he is in a process. The progress can be determinate or indeterminate. Use the Progress Bar to show an ongoing process that takes a noticeable time to finish.


Below we are presenting our examples of progress components that you can use in your Tailwind CSS project. They come in different styles so you can adapt them easily to your needs.


50%

<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-pink" data-value="50"></div>
  </div>
</div>


Progress Variation

Use this examples to create simple progress components.


50%

50%

50%
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-pink" data-value="50"></div>
  </div>
</div>
<div class="w-full mb-4">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-blue progress-stripped"
      data-value="50"
    ></div>
  </div>
</div>
<div class="w-full">
  <div class="progress" percentage="true">
    <div class="progress-bar progress-pink" data-value="50">
      <span>50%</span>
    </div>
  </div>
</div>


Progress Styles

Use this example to create progress components on different colors.


50%

50%

50%

50%

50%

50%

<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-pink" data-value="50"></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-blue" data-value="50"></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-red" data-value="50"></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-green" data-value="50"></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-orange" data-value="50"></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div class="progress-bar progress-dark" data-value="50"></div>
  </div>
</div>


Progress with gradient

Use this example to create beautiful progress components with gradients.


50%

50%

50%

50%

50%

50%

<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-gradient progress-pink"
      data-value="50"
    ></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-gradient progress-blue"
      data-value="50"
    ></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-gradient progress-red"
      data-value="50"
    ></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-gradient progress-green"
      data-value="50"
    ></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-gradient progress-orange"
      data-value="50"
    ></div>
  </div>
</div>
<div class="w-full">
  <span class="text-sm font-normal leading-6 text-blue-grey-500">50%</span>
  <div class="progress">
    <div
      class="progress-bar progress-gradient progress-dark"
      data-value="50"
    ></div>
  </div>
</div>