Simple Percentage Progress Bar Effect Example for jQuery Implementation

This article illustrates the simple percentage progress bar implemented by jQuery. Share it for your reference, as follows:

1. JS Code:

<script type="text/javascript">
  var progressId = "ProgressBarID";
  function setProgressBar(progress) {
   if (progress) {
    $("#" + progressId + " > div").css("width", String(progress) + "%");
    $("#" + progressId + " > div").html(String(progress) + "%");
   }
  }
  var i_ProgressBar = 0;
  function doProgressBarLoading() {
   if (i_ProgressBar > 100) {
    alert(" Load complete ? ! ! ");
    return;
   }
   if (i_ProgressBar <= 100) {
    setTimeout("doProgressBarLoading()", 10);
    setProgressBar(i_ProgressBar);
    i_ProgressBar++;
   }
  }
  function setProgressBarCss() {
   $("#" + progressId + "").css({ "width": "300px", "height": "25px" });
   $("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" });
  }
  $(document).ready(function () {
   setProgressBarCss();
   doProgressBarLoading();
  });
</script>

2. Html Code:

<div id="ProgressBarID">
 <div>
 </div>
</div>

For more readers interested in jQuery related content, please check the topics of this site: "Summary of Common Plugins and Usage of jQuery", "Summary of Common Classic Special Effects of jQuery", "Summary of Operation Skills of jQuery form", "Summary of Data Skills of Operation of json of jQuery", "Summary of Extension Skills of jQuery", "Summary of Drag and Drop Special Effects and Skills of jQuery", "Summary of Operation Skills of jQuery Table (table)", "Summary of Usage of Ajax in jquery", "Summary of Usage of Animation and Special Effects of jQuery" and "Usage of

I hope this article is helpful to everyone's jQuery programming.