Progress Bar - Midone - Tailwind HTML Admin Template

Progressbar

Basic Progressbar

Show example code

  HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full"HTMLCloseTag HTMLOpenTagdiv class="w-1/2 h-full bg-theme-1 rounded-full"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-2/3 h-full bg-theme-1 rounded-full"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-3/4 h-full bg-theme-1 rounded-full"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Progressbar with Label

Show example code

50%

60%

70%

  HTMLOpenTagdiv class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded"HTMLCloseTag HTMLOpenTagdiv class="w-1/2 h-full bg-theme-1 rounded text-center text-xs text-white"HTMLCloseTag50%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-2/3 h-full bg-theme-1 rounded text-center text-xs text-white"HTMLCloseTag60%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-3/4 h-full bg-theme-1 rounded text-center text-xs text-white"HTMLCloseTag70%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Progressbar Height

Show example code

  HTMLOpenTagdiv class="w-full h-1 bg-gray-400 dark:bg-dark-1 rounded-full"HTMLCloseTag HTMLOpenTagdiv class="w-1/2 h-full bg-theme-1 rounded-full"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-2/3 h-full bg-theme-1 rounded"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-3 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-3/4 h-full bg-theme-1 rounded"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Progressbar Color

Show example code

  HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full"HTMLCloseTag HTMLOpenTagdiv class="w-1/2 h-full bg-theme-1 rounded-full"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-2/3 h-full bg-theme-9 rounded"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-3/4 h-full bg-theme-12 rounded"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="w-3/4 h-full bg-theme-6 rounded"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag