Dashpro | Tailwind Admin Template

Progress Bar

                    
<!-- progress -->
<div class="h-2 bg-gray-200 dark:bg-gray-700 boalstehwqbj">
  <div class="bg-purple-500 h-full boalstehwqbj" style="width: 80%"></div>
</div>
<!-- progress -->
<div class="h-2 bg-gray-200 dark:bg-gray-700 boalstehwqbj">
  <div class="bg-red-500 h-full boalstehwqbj" style="width: 40%"></div>
</div>
<!-- progress -->
<div class="h-2 bg-gray-200 dark:bg-gray-700 boalstehwqbj">
  <div class="bg-yellow-500 h-full boalstehwqbj" style="width: 30%"></div>
</div>
<!-- progress -->
<div class="h-2 bg-gray-200 dark:bg-gray-700 boalstehwqbj">
  <div class="bg-green-500 h-full boalstehwqbj" style="width: 20%"></div>
</div>
<!-- progress -->
<div class="h-2 bg-gray-200 dark:bg-gray-700 boalstehwqbj">
  <div class="bg-teal-500 h-full boalstehwqbj" style="width: 70%"></div>
</div>

Progress with Count

25%

45%

85%

95%

		                
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-gray-200 dark:bg-gray-700 rounded mb-4">
  <div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-purple-500" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-gray-200 dark:bg-gray-700 rounded mb-4">
  <div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-red-700" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
</div>
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-gray-200 dark:bg-gray-700 rounded mb-4">
  <div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-gray-800 text-center whitespace-nowrap bg-yellow-300" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
<!-- progress -->
<div class="flex h-4 mklausjenrhtm bg-gray-200 dark:bg-gray-700 rounded mb-4">
  <div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-700" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>

Vertical Progress

73%

UI/UX

53%

SEO

83%

Web

93%

Apps

		                
<!-- vertical progress -->
<div class="flex flex-wrap klsuaonrmcha -mx-4">
  <!-- Vertical Progress Bar -->
  <div class="flex-shrink w-1/4 uajskeiolksb max-w-full text-center">
    <div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-indigo-500 dark:bg-opacity-40 h-48 rounded mb-4">
      <div class="relative bg-indigo-700" style="height:73%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-bold">73%</span></div>
    </div>
    <p class="text-lg leading-normal mb-2 font-normal text-gray-800">UI/UX</p>
  </div>

  <!-- Vertical Progress Bar -->
  <div class="flex-shrink w-1/4 uajskeiolksb max-w-full text-center">
    <div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-red-500 dark:bg-opacity-40 h-48 rounded mb-4">
      <div class="relative bg-red-700" style="height:53%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-bold">53%</span></div>
    </div>
    <p class="text-lg leading-normal mb-2 font-normal text-gray-800">SEO</p>
  </div>

  <!-- Vertical Progress Bar -->
  <div class="flex-shrink w-1/4 uajskeiolksb max-w-full text-center">
    <div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-yellow-500 dark:bg-opacity-40 h-48 rounded mb-4">
      <div class="relative bg-yellow-300" style="height:83%"><span class="w-full text-gray-800 pt-2 absolute left=0 end-0 py-1 font-bold">83%</span></div>
    </div>
    <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Web</p>
  </div>

  <!-- Vertical Progress Bar -->
  <div class="flex-shrink w-1/4 uajskeiolksb max-w-full text-center">
    <div class="flex ioajsklehsnm flex-nowrap qjnakmsliyrh bg-green-500 dark:bg-opacity-40 h-48 rounded mb-4">
      <div class="relative bg-green-700" style="height:93%"><span class="w-full text-white pt-2 absolute left=0 end-0 py-1 font-bold">93%</span></div>
    </div>
    <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Apps</p>
  </div>
</div>