Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Simple jquery progress bar

Suggested Videos
Part 45 - jquery image slideshow with thumbnails
Part 46 - jquery animate function
Part 47 - jquery animation queue

In this video we will discuss how to create a simple animated jquery progress bar using animate() function.

simple jquery progress bar

    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myButton').click(function () {

            function animateProgressBar(percentageCompleted) {
                    'width': (500 * percentageCompleted) / 100
                }, 3000);

                $({ counter: 1 }).animate({ counter: percentageCompleted }, {
                    duration: 3000,
                    step: function () {
                        $('#innerDiv').text(Math.ceil(this.counter) + ' %');
<body style="font-family:Arial">
    Select Percentage :
    <select id="ddlPercentage">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="80">80</option>
        <option value="90">90</option>
        <option value="100">100</option>
    <input type="button" id="myButton" value="Start Animation" />
    <br /><br />
    <div id="outerDiv" style="background-color:#EEEEEE;
         height:20px; width:500px; padding:5px">
        <div id="innerDiv" style="background-color:red; height:19px;
             width:0px; color:white; text-align:center">

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.