Run time progress bar client side using jquery

//////////////////////////// HTML

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>

    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

    <link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<style>

        progress

        {

            -webkit-appearance: progress-bar;

            background-color: red;

            box-sizing: border-box;

            display: inline-block;

            height: 30px;

            width: 100%;

            vertical-align: -0.25em;

        }

        .progressbar

        {

            border: 1px solid #aaaaaa;

            height: 40px;

            background: #f38282;

        }

        .ui-widget-header

        {

            border: 1px solid #aaaaaa;

            background: #70c370 !important;

        }

        .ui-widget-content

        {

            border: 1px solid #aaaaaa;

            background: #f38282 !important;

        }

    </style>

    <input class="valIn" value="1" onkeyup="abc(event)" />

    <br>

    <br>

    <div class="progressbar">

    </div>

    <br />   

    <br>

    <span class="set">0</span> <span class="lessset">0</span>

//////////////// JQuery

<script type="text/javascript">

        var x = 0;

        function abc(e) {

            if ((e.keyCode > 47 && e.keyCode < 57) || (e.keyCode == 8 || e.keyCode == 46)) {

                var xvv = 500;

                var x = parseInt($(".valIn").val());

                var pr = (x * 100 / xvv)

                $(".progressbar").progressbar({

                    value: pr

                });

                $(".set").text("Percentage : "+pr + "%");

                var xt = (xvv - parseInt(x));

                $(".lessset").text("Total in (500) : "+xt);

                if (x == xvv) {

                    $(".lessset").text("Complete");

                    $(".lessset").css({ "background-color": "green", "color": "#fff" });

                }

                else {

                    $(".lessset").css("background-color", "red");

                }

            }

        }

    </script>

Result////////////////////////