JSFiddle - React, Tailwind, and code Playground

by vijayram_a

HTML

<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Progressbar - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script></script>
    </head>
    
    <body>
        <button id="progress">Make Progress!</button>
        <div id="progressbar"></div>
    </body>

</html>

JavaScript

$(function () {
    var i = 20;
    $('#progress').click(function () {
        // $("#progressbar").progressbar({
        //     value: 99
        //});
        i = i + 5;
        $.ajax({

            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            //data: '45'
            data: {
                json: JSON.stringify({
                    n: i
                })
            }
        }).done(function (data) {

            $("#progressbar").progressbar({
                value: data.n
            });


        });

    });
});