welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

How To Add Percentage (%) Loader To Your Site

By Anshuman Trivedi on 2/13/2017

Recently in my current project there was a requirement of client to add Percentage Loader while the components of site is loading.

I thought of writing this function to add Percentage Loader .

 

Step1:   HTML part -

<html>

<head>

</head>

<body>

      <div id="overlay">

                <div id="progstat"></div>

                <div id="progress"></div>

      </div>

      <div id="containerdd">

                  // all page data

       </div>

</body>

</html>

Step2:  Add CSS -

 

 <style>

docFile{width:32.2%;}

#overlay{position:fixed; z-index:99999; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.9); transition: 1s 0.4s;}

#progress{height:1px; background:#fff; position:absolute; width:0; top:50%;}

#progstat{font-size:0.7em; letter-spacing: 3px; position:absolute; top:50%; margin-top:-40px; width:100%; text-align:center; color:#fff;}

</style>

 

Step3:   Write Script-

 

  <script>

;(function(){

  function id(v){return document.getElementById(v); }

  function loadbar() {

    var ovrl = id("overlay"),

        prog = id("progress"),

        stat = id("progstat"),

        docFile = document.images,

        c = 0;

        tot = docFile.length;

 

    function documentLoaded(){

      c += 1;

      var perc = ((100/tot*c) << 0) +"%";

      prog.style.width = perc;

      stat.innerHTML = "Loading "+ perc;

      if(c===tot) return doneLoading();

    }

    function doneLoading(){

      ovrl.style.opacity = 0;

      setTimeout(function(){

        ovrl.style.display = "none";

      }, 1200);

    }

    for(var i=0; i<tot; i++) {

      var tDocumentData     = new Image();

      tDocumentData.onload  = documentLoaded;

      tDocumentData.onerror = documentLoaded;

      tDocumentData.src     = docFile[i].src;

    }   

  }

  document.addEventListener('DOMContentLoaded', loadbar, false);

}());

</script>

 

Step4-  Save and Publish .

CSS
Javascript
HTML 5
Blog Calendar
Blog Calendar List
2020 Apr  10  3
2020 Feb  18  4
2020 Jan  22  7
2019 Dec  15  4
2019 Nov  11  1
2019 Jan  31  3
2018 Dec  31  4
2018 Nov  66  3
2018 Oct  12  3
2018 Sep  192  11
2018 Aug  6  2
2018 Jun  11  1
2018 Jan  53  2
2017 Sep  544  5
2017 Aug  17  1
2017 Jul  17  2
2017 Jun  51  2
2017 May  21  1
2017 Apr  32  2
2017 Mar  118  4
2017 Feb  411  4
2016 Dec  177  3
2016 Nov  366  8
2016 Oct  240  10
2016 Sep  362  6
2016 Aug  39  1
2016 Jun  1754  6
2016 May  104  3
2016 Jan  70  2
2015 Dec  392  6
2015 Nov  4  1
2015 Oct  13  1
2015 Sep  1319  6
2015 Aug  13  1
2015 Jul  124  2
2015 Jun  10  1
2015 May  20  1
2015 Apr  28  3
2015 Mar  78  3
2015 Jan  5195  4
2014 Dec  17  1
2014 Nov  2212  4
2014 Oct  63  1
2014 Sep  104  2
2014 Aug  3986  1
2014 Jul  46  2
2014 Apr  2458  12
2014 Mar  284  19
2014 Feb  237  8
2014 Jan  1510  16
2013 Dec  21  2
2013 Nov  635  2
2013 Oct  250  3
2013 Sep  11  1
2013 Aug  37  3
2013 Jul  207  1
2013 Apr  49  6
2013 Mar  1827  10
2013 Feb  302  4
2013 Jan  262  2
2012 Nov  32  2
2012 Oct  444  10
Tag Cloud
Interested in our services? Still not sure about project details? get a quote