How to adjust progress bar with Jquery?

Question

So I am developing a reader for my comic and since the images take some time to download I wanted to preload them. Doing so meant having to create a Progress to display the progress of pages being downloaded before the reader can start reading it. I have it set up as you can see on this link here

I was wondering if there was a simple light weight code I can use to improve on. I was considering using Pace.JS but if there is a more light weight simple alternative then I'd prefer that cause I also want to learn how the ProgressBar works and perhaps improve it and learn more :D

If you check the link provided above it shows the page with the code I will put below implemented. After the pages load I will put jquery to hide the loading div. If possible can there be a way to also change the text alongside the download bar?

Sorry for so many questions, still learning >~<

HTML

<div id="loading">
<img id="loading_logo" class="animated infinite bounce" src="source_images/new_logo_compressed.png" />
    <div id="progressbar">
    <div></div>
    </div>
    <div class="text">Loading... 30%</div>
</div>
<a href="#" id="left" class="button hvr-icon-back"><div id="button_text">Next Page</div></a>
<a href="#" id="right" class="button hvr-icon-forward"><div id="button_text">Last Page</div></a>

<div >
<img id="manga" src="source_images/00.jpg" />
</div>

CSS

#loading {
background-color: black;
opacity: 0.75;
position: fixed;
z-index:1;
height:100%;
width:100%;
}

#loading_logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 30vh;
padding-bottom: 5vh;
width: 20vw;
}
#progressbar {
border: 3px solid #fff;
border-radius: 20px;
padding: 2px;    
margin-left: 20vw;
margin-right: 20vw;

}
#progressbar > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
width: 30%;
height: 18px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 20px;
}
.text {
color: #fff;
margin-top: 15px;
font-size: 21px;
font-weight: bold;
text-align: center;
}

Jquery (that makes reader work)

var count = 0;
var images = ["source_images/00.jpg", "source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg"];

// Preloading Images

$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}

$.preloadImages("source_images/00.jpg", "source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg");


$(function manga () {
$("#left").click(function () {
    ++count;
    var img = images[count % images.length];
    //alert(img);
    $("#manga").attr("src", img);
    //alert("clicked");
    //manga();
});
$("#right").click(function () {
    if(count == 0)
    {
        count = images.length-1;
    }
    else {
        --count;
    }

    var img = images[count % images.length];
    //alert(img);
    $("#manga").attr("src", img);
    //alert("clicked");
    //manga();
});
//manga();
});

Answer 1

i would prefer pace.JS as you already mentioned.. in this post someone tries something similar: How to show a running progress bar while page is loading

If u wanna start learning jquery u can go here: http://www.jquery-tutorial.net/

there is a nice documentation about DOM manipulation & Ajax Calls. That will help you

Answer 2

This works

var imgs =  { "first":0,"last":6, "path":"http://chocobento.x10.mx/chocobento/source_images/", "current":0}, 
    images = [],
    width = 0,
    pct = Math.ceil(100/(imgs.last-imgs.first))
    count=0;

function preload() {
  for (var i=imgs.first;i<=imgs.last;i++) {
    images[i] = new Image();
    images[i].onload=progress;
  }
  next();
} 
function next() {
  if (imgs.current > imgs.last) {
    $("#loading").hide(); // or setTimeout(function() {$("#loading").hide(); },200);
    return;
  }
  images[imgs.current].src=imgs.path+pad(imgs.current)+".jpg";      
  imgs.current++;
}
function pad(num) { return num >= 10?num:("0"+num).slice(-2);}

function progress() {
  width+=pct;
  if (width>100) width=100;
  $("#progressbar>div").css({"width":width+"%"});
  $(".text").html("Loading... "+width+"%");
  next();
}  

$(function() {
  preload();
  $("#left").click(function () {
    ++count;
    if (count>imgs.last) count = imgs.first; // wrap
    $("#manga").attr("src", images[count].src);
  });
  $("#right").click(function () {
     --count;
    if(count < imgs.first) count = imgs.last; // wrap
    $("#manga").attr("src", images[count].src);
  });
});

#loading {
 background-color: black;
 opacity: 0.75;
 position: fixed;
 z-index:1;
 height:100%;
 width:100%;
    }

    #loading_logo {
 display: block;
 margin-left: auto;
 margin-right: auto;
 padding-top: 30vh;
    padding-bottom: 5vh;
 width: 20vw;
    }
    #progressbar {
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 2px;    
 margin-left: 20vw;
    margin-right: 20vw;

    }
    #progressbar > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    width: 1%;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
    }
    .text {
    color: #fff;
    margin-top: 15px;
    font-size: 21px;
    font-weight: bold;
 text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loading">
    <img id="loading_logo" class="animated infinite bounce" src="http://chocobento.x10.mx/chocobento/source_images/new_logo_compressed.png" />
        <div id="progressbar">
       <div></div>
     </div>
        <div class="text">Loading... 0%</div>
    </div>

Answer 3

You can accomplish that without using Pace.Js. This only needs jQuery

$.ajax({
xhr: function()
{
  var xhr = new window.XMLHttpRequest();
  //Upload progress
  xhr.upload.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with upload progress
    console.log(percentComplete);
  }
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with download progress
    console.log(percentComplete);
  }
}, false);
  return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
//Do something success-ish
}
});