Progress Bar - Midone - Tailwind HTML Admin Template

Midone

Pages

Mail Settings

Users & Permissions

Transactions Report

Users

Denzel Washington

denzelwashington@left4code.com

Tom Cruise

tomcruise@left4code.com

Angelina Jolie

angelinajolie@left4code.com

Sylvester Stallone

sylvesterstallone@left4code.com

Products

Sony Master Series A9G

Progressbar

Basic Progressbar

Show example code

  HTMLOpenTagdiv class="progress"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2 bg-theme-1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-2/3 bg-theme-1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4 bg-theme-1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Progressbar with Label

Show example code

50%

60%

70%

  HTMLOpenTagdiv class="progress h-4 rounded"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2 bg-theme-1 rounded" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTag50%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress h-4 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-2/3 bg-theme-1 rounded" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTag60%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress h-4 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4 bg-theme-1 rounded" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTag70%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Progressbar Height

Show example code

  HTMLOpenTagdiv class="progress h-1 rounded"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2 bg-theme-1 rounded" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-2/3 bg-theme-1 rounded" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress h-3 rounded mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4 bg-theme-1 rounded" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Progressbar Color

Show example code

  HTMLOpenTagdiv class="progress"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2 bg-theme-1" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-2/3 bg-theme-9" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4 bg-theme-12" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4 bg-theme-6" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Dark Mode