Progress Bar - Midone - Tailwind HTML Admin Template

Pages

Users

John Travolta

johntravolta@left4code.com

Johnny Depp

johnnydepp@left4code.com

Robert De Niro

robertdeniro@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Products

Dell XPS 13

PC & Laptop

Sony Master Series A9G

Electronic

Sony Master Series A9G

Electronic

Nikon Z6

Photography

Progressbar

Basic Progressbar

Show example code

  HTMLOpenTagdiv class="progress"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2" 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" 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" 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"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTag50%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress h-4 mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-2/3" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTag60%HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress h-4 mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4" 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"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-1/2" 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" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="progress h-3 mt-3"HTMLCloseTag HTMLOpenTagdiv class="progress-bar w-3/4" 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" 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-success" 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-warning" 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-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag