Progress Bar - Rubick - Tailwind HTML Admin Template

Pages

Users

Robert De Niro

robertdeniro@left4code.com

Brad Pitt

bradpitt@left4code.com

Denzel Washington

denzelwashington@left4code.com

Christian Bale

christianbale@left4code.com

Products

Nikon Z6

Photography

Samsung Galaxy S20 Ultra

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