Progressbar

Basic Progressbar

            
                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

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

            
                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

            
                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