Progress Bar - Midone - Tailwind HTML Admin Template

Pages

Users

Products

Samsung Galaxy S20 Ultra

Notifications

Robert De Niro

05:09 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Christian Bale

05:09 AM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Brad Pitt

01:10 PM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Brad Pitt

05:09 AM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Robert De Niro

06:05 AM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

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