ajax percentage

by karthick Chandran

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.rawgit.com/karthickj25/nanobar/17b4e1c3/nanobar.min.js"></script>
<div id='progressme' style="Width:100%">
  test me the ththht
</div>
<div id="progressCounter"></div>
<br>
<div id="loading">Loading</div>
<br>
<div id="data"></div>

CSS

.nanobar .bar {
  background: #38f;
  border-radius: 4px;
  box-shadow: 0 0 10px #59d;
  margin: 0 auto;
}

JavaScript

var progressElem = $('#progressCounter');
var URL = "https://api.github.com/users/mralexgray/repos";
$("#loading").hide();
progressElem.text(URL);
console.log("Hi");

var options = {
    classname: 'my-class',
    id: 'my-id'
    /*target: document.getElementById('maincontent')*/
    };

    var nanobar = new Nanobar(options);

    // move bar

    // size bar 76%

    // size bar 100% and and finish


    $(document).ajaxSend(function(event, xhr, options) {
      nanobar.go(30); // size bar 30%

    }).ajaxComplete(function(event, xhr, options) {
      console.log("finished....");
    }).ajaxSuccess(function(event, xhr, options) {
      nanobar.go(76);
      nanobar.go(100);
    }).ajaxError(function(event, xhr, options) {


      });

      console.log("two");

      $("#loading").hide();

      $.ajax({
        type: 'GET',
        dataType: 'json',
        url: URL,
        cache: false,
        success: function(data) {

          $("#data").html("data receieved");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
            alert(thrownError);
          }
          
      });