Tailwind CSS Progress - Nuanxa

Komponen progress digunakan untuk menampilkan progres dari suatu tugas atau operasi. Komponen ini mendukung berbagai gaya dan dapat dengan mudah dikustomisasi.

Requires Nuanxa JS

Default progress

Komponen progress standar dengan label dan gaya dasar.

HTML - 70%

CSS - 50%

JavaScript - 30%

Tailwind CSS - 80%

            
<div class="mb-4">
  <label for="" class="block mb-1">HTML - 70%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div class="bg-blue-500 h-4 rounded-full" style="width: 70%"></div>
  </div>
</div>
<div class="mb-4">
  <label for="" class="block mb-1">CSS - 50%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div class="bg-green-500 h-4 rounded-full" style="width: 50%"></div>
  </div>
</div>
<div class="mb-4">
  <label for="" class="block mb-1">JavaScript - 30%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div class="bg-yellow-500 h-4 rounded-full" style="width: 30%"></div>
  </div>
</div>
<div>
  <label for="" class="block mb-1">Tailwind CSS - 80%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div class="bg-purple-500 h-4 rounded-full" style="width: 80%"></div>
  </div>
</div>

Progress label inside

Komponen progress standar dengan label di dalam progress bar.

HTML

70%

CSS - 50%

50%

JavaScript - 30%

30%

Tailwind CSS - 80%

80%

            
<div class="mb-4">
  <label for="" class="block mb-1">HTML </label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-5">
    <div
      class="bg-blue-500 h-5 rounded-full flex items-center justify-center text-xs font-semibold text-white"
      style="width: 70%"
    >
      70%
    </div>
  </div>
</div>
<div class="mb-4">
  <label for="" class="block mb-1">CSS - 50%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-5">
    <div
      class="bg-green-500 h-5 rounded-full flex items-center justify-center text-xs font-semibold text-white"
      style="width: 50%"
    >
      50%
    </div>
  </div>
</div>
<div class="mb-4">
  <label for="" class="block mb-1">JavaScript - 30%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-5">
    <div
      class="bg-yellow-500 h-5 rounded-full flex items-center justify-center text-xs font-semibold text-gray-900"
      style="width: 30%"
    >
      30%
    </div>
  </div>
</div>
<div>
  <label for="" class="block mb-1">Tailwind CSS - 80%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-5">
    <div
      class="bg-purple-500 h-5 rounded-full flex items-center justify-center text-xs font-semibold text-white"
      style="width: 80%"
    >
      80%
    </div>
  </div>
</div>

Striped progress

Progress bar dengan latar belakang bergaris.

HTML - 70%

CSS - 50%

JavaScript - 30%

Tailwind CSS - 80%

            
<div class="mb-4">
  <label for="" class="block mb-1">HTML - 70%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div
      class="bg-blue-500 h-4 rounded-full bg-striped"
      style="width: 70%"
    ></div>
  </div>
</div>
<div class="mb-4">
  <label for="" class="block mb-1">CSS - 50%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div
      class="bg-green-500 h-4 rounded-full bg-striped"
      style="width: 50%"
    ></div>
  </div>
</div>
<div class="mb-4">
  <label for="" class="block mb-1">JavaScript - 30%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div
      class="bg-yellow-500 h-4 rounded-full bg-striped"
      style="width: 30%"
    ></div>
  </div>
</div>
<div>
  <label for="" class="block mb-1">Tailwind CSS - 80%</label>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
    <div
      class="bg-purple-500 h-4 rounded-full bg-striped"
      style="width: 80%"
    ></div>
  </div>
</div>

Pagination

Sidebar