Announcement

Collapse
No announcement yet.

How to display progress bar?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to display progress bar?

    Hi Everyone

    I have been searching for this very long time but could not find any good steps / articles. Today I am able to successfully develop one and wanted to share as this could be beneficial to someone


    First Create a Blank Application and enter the below code in the execute

    ?>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type='text/javascript'>

    function DisplayProgressBar(currentPercentage) {
    $("#NNinnerDiv").animate({ "width": (currentPercentage * 700) / 100 }, {
    duration: 1000,
    step: function (now, fx) {
    $("#NNinnerDiv").text(Math.ceil((now / 700) * 100) + ' %');
    }
    });
    }
    </script>

    </head>

    <body style='font-family:Arial'>
    <div id='NNouterDiv' style='background-color:#EEEEEE; height:20px; width:700px; padding:5px'>
    <div id='NNinnerDiv' style='width:0px; height:19px; text-align:center; background-color:red; color:white'></div>
    </div>
    </body>

    <?php

    // The above code will declare the progress bar

    // The below will call them first one will display 20% and second one will display 50% with animation.

    echo "
    <script>
    DisplayProgressBar(20);
    </script>";

    echo "
    <script>
    DisplayProgressBar(50);
    </script>";




  • #2
    possible to use this in a grid or form? examples?

    Comment

    Working...
    X