javascript - Create a percentage preloader with words instead of number? -

i trying create percentage preloader has words instead of numbers.... i.e. 1 percent, 2 percent, etc. 1 hundred percent.

i know move fast...

not quite sure start? have googled , tried hand @ bit, push in right direction i'm looking for!

thx!!!

this function i'm going use convert number below 100 english version:

function numbertostring(n) {      var tofifteen = "one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen".split(",");     var tens = "teen,twenty,thirtee,fourty,fifty,sixty,seventy,eighty,ninety".split(",");     if (n == 0)         return "zero";     if (n <= 15)         return tofifteen[n - 1];     if (n < 20)         return (tofifteen[- -(n+"")[1] - 1] || "") + "teen";     if (n == 100)         return "one hundred";      return tens[- -(n+"")[0] - 1] + " " + (tofifteen[- -(n+"")[1] - 1] || ""); } 

i provide 2 approach, first works if want 1 or use arrays, second works if want multiple ones , want manage them easily.

first approach:

// create progress bar element  var progress = document.createelement("span");  var currprogress = 0;    progress.innerhtml = numbertostring(currprogress)    // should put el  document.body.appendchild(progress);    // following part updates progress bar, change  // whatever way want updated    setinterval(function() {    currprogress++;    if (currprogress > 100)      currprogress = 0;    progress.innerhtml = numbertostring(currprogress);  }, 100);    function numbertostring(n) {            var tofifteen = "one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen".split(",");      var tens = "teen,twenty,thirtee,fourty,fifty,sixty,seventy,eighty,ninety".split(",");      if (n == 0)          return "zero";      if (n <= 15)          return tofifteen[n - 1];      if (n < 20)          return (tofifteen[- -(n+"")[1] - 1] || "") + "teen";      if (n == 100)          return "one hundred";       return tens[- -(n+"")[0] - 1] + " " + (tofifteen[- -(n+"")[1] - 1] || "");  }

this allows have 1 progress bar on page, i'd recommend using more object oriented solution:

function progressbar(startingprogress) {    // makes argument optional    // if user doesn't enter number,    // default 0    if (!startingprogress)      startingprogress = 0;    this.progress = 0;        this.element = document.createelement("span");    this.element.innerhtml = progressbar.numbertostring(this.progress);  }    progressbar.prototype.step = function(amount) {    // same startingprogress    if (!amount)      amount = 1;    this.progress += amount;    this.element.innerhtml = progressbar.numbertostring(this.progress);  }    // "static" method  progressbar.numbertostring = function(n) {            var tofifteen = "one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve,thirteen,fourteen,fifteen".split(",");      var tens = "teen,twenty,thirtee,fourty,fifty,sixty,seventy,eighty,ninety".split(",");      if (n == 0)          return "zero";      if (n <= 15)          return tofifteen[n - 1];      if (n < 20)          return (tofifteen[- -(n+"")[1] - 1] || "") + "teen";      if (n == 100)          return "one hundred";       return tens[- -(n+"")[0] - 1] + " " + (tofifteen[- -(n+"")[1] - 1] || "");  }    var progress = new progressbar();  document.body.appendchild(progress.element);    setinterval(function() {      progress.step(1);  }, 100);