Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Rubick
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Johnny Depp
johnnydepp@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
Russell Crowe
russellcrowe@left4code.com
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Products
Sony Master Series A9G
Electronic
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Nikon Z6
Photography
Nike Air Max 270
Sport & Outdoor

## Progressbar

## Basic Progressbar

Show example code

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-1/2"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-2/3"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="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="h-4"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-1/2"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTag
                                        50%
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3 h-4"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-2/3"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTag
                                        60%
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3 h-4"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-3/4"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTag
                                        70%
                                    HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

## Progressbar Height

Show example code

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

## Progressbar Color

Show example code

                    HTMLOpenTagdivHTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-1/2"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-2/3 bg-success"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-3/4 bg-warning"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                    HTMLOpenTagdiv
                                        class="w-3/4 bg-danger"
                                        role="progressbar"
                                        aria-valuenow="0"
                                        aria-valuemin="0"
                                        aria-valuemax="100"
                                    HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag