JSFiddle - React, Tailwind, and code Playground

by meetravi

HTML

<html>
    <body>
            <div class="voting-progress-bar">
                <!-- Set the CSS width Percentage for the value to paint the graph-->
                <span class="value"></span>
            </div>
    </body>
    
</html>

CSS

.voting-progress-bar{
                
                float: left;
                height: 16px;
                width: 150px;
                border: 1px solid #283136;
                border-radius: 5px;
                margin-top:3px;
                
                    
                
            }

.value{
                     border:1px solid red;        
                    display: block;
                    float: left;
                    height: 96%;
                    width: 0%;
                    background-color: red;
                    
                 transition:width 2s;
                 -moz-transition:width 2s; /* Firefox 4 */
                -webkit-transition:width 2s; /* Safari and Chrome */
                -o-transition:width 2s; /* Opera */    

                }

JavaScript

$('.value').animate({'width':'80%'});