ローディングの未圧縮ソース達

loading.coffee

NUMBERS = [
  'zero'
  'one'
  'two'
  'three'
  'four'
  'five'
  'six'
  'seven'
  'eight'
  'nine'
  'ten'
  'eleven'
  'twelve'
  'thirteen'
  'fourteen'
  'fifteen'
  'sixteen'
  'seventeen'
  'eighteen'
  'nineteen'
  'twenty'
  'thirty'
  'forty'
  'fifty'
  'sixty'
  'seventy'
  'eighty'
  'ninety'
  'hundred'
]
toRGB = (h, s, v)->
  if s is 0
    r = v
    g = v
    b = v
  else
    h %= 360
    hi = h / 60 >> 0
    f = h / 60 - hi
    p = v * (1 - s)
    q = v * (1 - f * s)
    t = v * (1 - (1 - f) * s)
    switch hi
      when 0
        r = v
        g = t
        b = p
      when 1
        r = q
        g = v
        b = p
      when 2
        r = p
        g = v
        b = t
      when 3
        r = p
        g = q
        b = v
      when 4
        r = t
        g = p
        b = v
      when 5
        r = v
        g = p
        b = q
  r * 0xff << 16 | g * 0xff << 8 | b * 0xff
toColorString = (color = 0, alpha = 1)->
  "rgba(#{ color >> 16 & 0xff },#{ color >> 8 & 0xff },#{ color & 0xff },#{ if alpha < 0 then 0 else if alpha > 1 then 1 else alpha })"
ticker = do ->
  #@requestAnimationFrame or
  #@webkitRequestAnimationFrame or
  #@mozRequestAnimationFrame or
  #@oRequestAnimationFrame or
  #@msRequestAnimationFrame or
  (callback) -> setTimeout (()->callback((new Date()).getTime())), 1000 / 30

class Loading

  constructor:(@canvas, @onComplete)->
    @width = @canvas.width
    @height = @canvas.height
    @x = @width / 2 >> 0
    @y = @height / 2 >> 0
    @context = @canvas.getContext '2d'
    @context.translate @x, @y
    @context.textBaseline = 'alphabetic'

    @updated = false

  update:(ratio)->
    @ratio = ratio
    if @ratio is 0
      @updated = true
      @currentFrame = 0
      ticker @onTicker
    if @ratio is 1
      @updated = false

    percent = ratio * 100
    percent >>= 0
    if percent < 20
      percent = NUMBERS[percent]
    else
      ones = percent % 10
      tenth = percent / 10
      percent = NUMBERS[18 + (tenth >> 0)]
      if ones isnt 0
        percent += '-' + NUMBERS[ones]
    @percent = percent
    return

  onTicker:(time)=>
    @currentFrame++

    @context.fillStyle = '#ffffff'
    @context.fillRect -@x, -@y, @canvas.width, @canvas.height

    alpha = 1
    unless @updated
      unless @completeFrame?
        @completeFrame = @currentFrame
      deltaFrame = @currentFrame - @completeFrame
      if deltaFrame > 15
        alpha = 1 - (deltaFrame - 15) / 8
      if alpha <= 0
        if @onComplete?
          setTimeout @onComplete, 0
          return

    hue = 180 + 180 * @ratio
    gradient = @context.createLinearGradient 0, 0, @width, 0
    maxRotation = 90
    for rotation in [0...maxRotation]
      gradient.addColorStop rotation / maxRotation, toColorString(toRGB(hue + rotation, 1, 1), alpha)

    @context.fillStyle = gradient
    @context.fillRect -@x, 0, @width * @ratio, 1
    @context.font = '900 24px "Helvetica", "Arial"'
    @context.textAlign = 'right'
    @context.fillText @percent, 0, 0
    @context.font = '100 24px "Helvetica", "Arial"'
    @context.textAlign = 'left'
    @context.fillText 'percent', 0, 0

    ticker @onTicker
    return

document.addEventListener 'DOMContentLoaded', (e)->
  loading = new Loading document.querySelector('canvas'), -> alert 'complete'
  counter = 0
  loading.update counter
  intervalId = setInterval (->
    loading.update ++counter / 100
    if counter is 100
      clearInterval intervalId
  ), 50
  return

loading.js

(function() {
  var Loading, NUMBERS, ticker, toColorString, toRGB;
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  NUMBERS = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety', 'hundred'];

  toRGB = function(h, s, v) {
    var b, f, g, hi, p, q, r, t;
    if (s === 0) {
      r = v;
      g = v;
      b = v;
    } else {
      h %= 360;
      hi = h / 60 >> 0;
      f = h / 60 - hi;
      p = v * (1 - s);
      q = v * (1 - f * s);
      t = v * (1 - (1 - f) * s);
      switch (hi) {
        case 0:
          r = v;
          g = t;
          b = p;
          break;
        case 1:
          r = q;
          g = v;
          b = p;
          break;
        case 2:
          r = p;
          g = v;
          b = t;
          break;
        case 3:
          r = p;
          g = q;
          b = v;
          break;
        case 4:
          r = t;
          g = p;
          b = v;
          break;
        case 5:
          r = v;
          g = p;
          b = q;
      }
    }
    return r * 0xff << 16 | g * 0xff << 8 | b * 0xff;
  };

  toColorString = function(color, alpha) {
    if (color == null) color = 0;
    if (alpha == null) alpha = 1;
    return "rgba(" + (color >> 16 & 0xff) + "," + (color >> 8 & 0xff) + "," + (color & 0xff) + "," + (alpha < 0 ? 0 : alpha > 1 ? 1 : alpha) + ")";
  };

  ticker = (function() {
    return function(callback) {
      return setTimeout((function() {
        return callback((new Date()).getTime());
      }), 1000 / 30);
    };
  })();

  Loading = (function() {

    function Loading(canvas, onComplete) {
      this.canvas = canvas;
      this.onComplete = onComplete;
      this.onTicker = __bind(this.onTicker, this);
      this.width = this.canvas.width;
      this.height = this.canvas.height;
      this.x = this.width / 2 >> 0;
      this.y = this.height / 2 >> 0;
      this.context = this.canvas.getContext('2d');
      this.context.translate(this.x, this.y);
      this.context.textBaseline = 'alphabetic';
      this.updated = false;
    }

    Loading.prototype.update = function(ratio) {
      var ones, percent, tenth;
      this.ratio = ratio;
      if (this.ratio === 0) {
        this.updated = true;
        this.currentFrame = 0;
        ticker(this.onTicker);
      }
      if (this.ratio === 1) this.updated = false;
      percent = ratio * 100;
      percent >>= 0;
      if (percent < 20) {
        percent = NUMBERS[percent];
      } else {
        ones = percent % 10;
        tenth = percent / 10;
        percent = NUMBERS[18 + (tenth >> 0)];
        if (ones !== 0) percent += '-' + NUMBERS[ones];
      }
      this.percent = percent;
    };

    Loading.prototype.onTicker = function(time) {
      var alpha, deltaFrame, gradient, hue, maxRotation, rotation;
      this.currentFrame++;
      this.context.fillStyle = '#ffffff';
      this.context.fillRect(-this.x, -this.y, this.canvas.width, this.canvas.height);
      alpha = 1;
      if (!this.updated) {
        if (this.completeFrame == null) this.completeFrame = this.currentFrame;
        deltaFrame = this.currentFrame - this.completeFrame;
        if (deltaFrame > 15) alpha = 1 - (deltaFrame - 15) / 8;
        if (alpha <= 0) {
          if (this.onComplete != null) {
            setTimeout(this.onComplete, 0);
            return;
          }
        }
      }
      hue = 180 + 180 * this.ratio;
      gradient = this.context.createLinearGradient(0, 0, this.width, 0);
      maxRotation = 90;
      for (rotation = 0; 0 <= maxRotation ? rotation < maxRotation : rotation > maxRotation; 0 <= maxRotation ? rotation++ : rotation--) {
        gradient.addColorStop(rotation / maxRotation, toColorString(toRGB(hue + rotation, 1, 1), alpha));
      }
      this.context.fillStyle = gradient;
      this.context.fillRect(-this.x, 0, this.width * this.ratio, 1);
      this.context.font = '900 24px "Helvetica", "Arial"';
      this.context.textAlign = 'right';
      this.context.fillText(this.percent, 0, 0);
      this.context.font = '100 24px "Helvetica", "Arial"';
      this.context.textAlign = 'left';
      this.context.fillText('percent', 0, 0);
      ticker(this.onTicker);
    };

    return Loading;

  })();

  document.addEventListener('DOMContentLoaded', function(e) {
    var counter, intervalId, loading;
    loading = new Loading(document.querySelector('canvas'), function() {
      return alert('complete');
    });
    counter = 0;
    loading.update(counter);
    intervalId = setInterval((function() {
      loading.update(++counter / 100);
      if (counter === 100) return clearInterval(intervalId);
    }), 50);
  });

}).call(this);

loading.min.js

((function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}};b=["zero","one","two","three","four","five","six","seven","eight","nine","ten","eleven","twelve","thirteen","fourteen","fifteen","sixteen","seventeen","eighteen","nineteen","twenty","thirty","forty","fifty","sixty","seventy","eighty","ninety","hundred"],e=function(a,b,c){var d,e,f,g,h,i,j,k;if(b===0)j=c,f=c,d=c;else{a%=360,g=a/60>>0,e=a/60-g,h=c*(1-b),i=c*(1-e*b),k=c*(1-(1-e)*b);switch(g){case 0:j=c,f=k,d=h;break;case 1:j=i,f=c,d=h;break;case 2:j=h,f=c,d=k;break;case 3:j=h,f=i,d=c;break;case 4:j=k,f=h,d=c;break;case 5:j=c,f=h,d=i}}return j*255<<16|f*255<<8|d*255},d=function(a,b){return a==null&&(a=0),b==null&&(b=1),"rgba("+(a>>16&255)+","+(a>>8&255)+","+(a&255)+","+(b<0?0:b>1?1:b)+")"},c=function(){return function(a){return setTimeout(function(){return a((new Date).getTime())},1e3/30)}}(),a=function(){function a(a,b){this.canvas=a,this.onComplete=b,this.onTicker=f(this.onTicker,this),this.width=this.canvas.width,this.height=this.canvas.height,this.x=this.width/2>>0,this.y=this.height/2>>0,this.context=this.canvas.getContext("2d"),this.context.translate(this.x,this.y),this.context.textBaseline="alphabetic",this.updated=!1}return a.prototype.update=function(a){var d,e,f;this.ratio=a,this.ratio===0&&(this.updated=!0,this.currentFrame=0,c(this.onTicker)),this.ratio===1&&(this.updated=!1),e=a*100,e>>=0,e<20?e=b[e]:(d=e%10,f=e/10,e=b[18+(f>>0)],d!==0&&(e+="-"+b[d])),this.percent=e},a.prototype.onTicker=function(a){var b,f,g,h,i,j;this.currentFrame++,this.context.fillStyle="#ffffff",this.context.fillRect(-this.x,-this.y,this.canvas.width,this.canvas.height),b=1;if(!this.updated){this.completeFrame==null&&(this.completeFrame=this.currentFrame),f=this.currentFrame-this.completeFrame,f>15&&(b=1-(f-15)/8);if(b<=0&&this.onComplete!=null){setTimeout(this.onComplete,0);return}}h=180+180*this.ratio,g=this.context.createLinearGradient(0,0,this.width,0),i=90;for(j=0;0<=i?j<i:j>i;0<=i?j++:j--)g.addColorStop(j/i,d(e(h+j,1,1),b));this.context.fillStyle=g,this.context.fillRect(-this.x,0,this.width*this.ratio,1),this.context.font='900 24px "Helvetica", "Arial"',this.context.textAlign="right",this.context.fillText(this.percent,0,0),this.context.font='100 24px "Helvetica", "Arial"',this.context.textAlign="left",this.context.fillText("percent",0,0),c(this.onTicker)},a}(),document.addEventListener("DOMContentLoaded",function(b){var c,d,e;e=new a(document.querySelector("canvas"),function(){return alert("complete")}),c=0,e.update(c),d=setInterval(function(){e.update(++c/100);if(c===100)return clearInterval(d)},50)})})).call(this);