First commit

platforms/hybrid/assets/css/dist/loading-bar.css

@@ -0,0 +1,18 @@
+.ldBar {
+  position: relative;
+}
+.ldBar.label-center > .ldBar-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-shadow: 0 0 3px #fff;
+}
+.ldBar-label:after {
+  content: "%";
+  display: inline;
+}
+.ldBar.no-percent .ldBar-label:after {
+  content: "";
+}

platforms/hybrid/assets/css/dist/loading-bar.js

@@ -0,0 +1,811 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+// Generated by LiveScript 1.3.1
+var presets, simpleStr, wrap, slice$ = [].slice, toString$ = {}.toString;
+presets = require('./presets').presets;
+simpleStr = function(arr){
+  return arr.join('');
+};
+wrap = function(content){
+  return "data:image/svg+xml;base64," + btoa(content);
+};
+(function(){
+  var make, handler, ldBar;
+  make = {
+    head: function(viewBox){
+      return "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"" + viewBox + "\">";
+    },
+    gradient: function(dir, dur){
+      var colors, ret, len, gx, gy, x, y, i$, i, idx;
+      dir == null && (dir = 45);
+      dur == null && (dur = 1);
+      colors = slice$.call(arguments, 2);
+      ret = [this.head("0 0 100 100")];
+      len = colors.length * 4 + 1;
+      dir = dir * Math.PI / 180;
+      gx = Math.pow(Math.cos(dir), 2);
+      gy = Math.sqrt(gx - Math.pow(gx, 2));
+      if (dir > Math.PI * 0.25) {
+        gy = Math.pow(Math.sin(dir), 2);
+        gx = Math.sqrt(gy - Math.pow(gy, 2));
+      }
+      x = gx * 100;
+      y = gy * 100;
+      ret.push("<defs><linearGradient id=\"gradient\" x1=\"0\" x2=\"" + gx + "\" y1=\"0\" y2=\"" + gy + "\">");
+      for (i$ = 0; i$ < len; ++i$) {
+        i = i$;
+        idx = i * 100 / (len - 1);
+        ret.push("<stop offset=\"" + idx + "%\" stop-color=\"" + colors[i % colors.length] + "\"/>");
+      }
+      ret.push("</linearGradient></defs>\n<rect x=\"0\" y=\"0\" width=\"400\" height=\"400\" fill=\"url(#gradient)\">\n<animateTransform attributeName=\"transform\" type=\"translate\" from=\"-" + x + ",-" + y + "\"\nto=\"0,0\" dur=\"" + dur + "s\" repeatCount=\"indefinite\"/></rect></svg>");
+      return wrap(ret.join(""));
+    },
+    stripe: function(c1, c2, dur){
+      var ret, i;
+      c1 == null && (c1 = '#b4b4b4');
+      c2 == null && (c2 = '#e6e6e6');
+      dur == null && (dur = 1);
+      ret = [this.head("0 0 100 100")];
+      ret = ret.concat([
+        "<rect fill=\"" + c2 + "\" width=\"100\" height=\"100\"/>", "<g><g>", (function(){
+          var i$, results$ = [];
+          for (i$ = 0; i$ < 13; ++i$) {
+            i = i$;
+            results$.push(("<polygon fill=\"" + c1 + "\" ") + ("points=\"" + (-90 + i * 20) + ",100 " + (-100 + i * 20) + ",") + ("100 " + (-60 + i * 20) + ",0 " + (-50 + i * 20) + ",0 \"/>"));
+          }
+          return results$;
+        }()).join(""), "</g><animateTransform attributeName=\"transform\" type=\"translate\" ", "from=\"0,0\" to=\"20,0\" dur=\"" + dur + "s\" repeatCount=\"indefinite\"/></g></svg>"
+      ].join(""));
+      return wrap(ret);
+    },
+    bubble: function(c1, c2, count, dur, size, sw){
+      var ret, i$, i, idx, x, r, d;
+      c1 == null && (c1 = '#39d');
+      c2 == null && (c2 = '#9cf');
+      count == null && (count = 15);
+      dur == null && (dur = 1);
+      size == null && (size = 6);
+      sw == null && (sw = 1);
+      ret = [this.head("0 0 200 200"), "<rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"" + c1 + "\"/>"];
+      for (i$ = 0; i$ < count; ++i$) {
+        i = i$;
+        idx = -(i / count) * dur;
+        x = Math.random() * 184 + 8;
+        r = (Math.random() * 0.7 + 0.3) * size;
+        d = dur * (1 + Math.random() * 0.5);
+        ret.push(["<circle cx=\"" + x + "\" cy=\"0\" r=\"" + r + "\" fill=\"none\" stroke=\"" + c2 + "\" stroke-width=\"" + sw + "\">", "<animate attributeName=\"cy\" values=\"190;-10\" times=\"0;1\" ", "dur=\"" + d + "s\" begin=\"" + idx + "s\" repeatCount=\"indefinite\"/>", "</circle>", "<circle cx=\"" + x + "\" cy=\"0\" r=\"" + r + "\" fill=\"none\" stroke=\"" + c2 + "\" stroke-width=\"" + sw + "\">", "<animate attributeName=\"cy\" values=\"390;190\" times=\"0;1\" ", "dur=\"" + d + "s\" begin=\"" + idx + "s\" repeatCount=\"indefinite\"/>", "</circle>"].join(""));
+      }
+      return wrap(ret.join("") + "</svg>");
+    }
+  };
+  handler = {
+    queue: {},
+    running: false,
+    main: function(timestamp){
+      var keepon, removed, k, ref$, func, ret, this$ = this;
+      keepon = false;
+      removed = [];
+      for (k in ref$ = this.queue) {
+        func = ref$[k];
+        ret = func(timestamp);
+        if (!ret) {
+          removed.push(func);
+        }
+        keepon = keepon || ret;
+      }
+      for (k in ref$ = this.queue) {
+        func = ref$[k];
+        if (removed.indexOf(func) >= 0) {
+          delete this.queue[k];
+        }
+      }
+      if (keepon) {
+        return requestAnimationFrame(function(it){
+          return this$.main(it);
+        });
+      } else {
+        return this.running = false;
+      }
+    },
+    add: function(key, f){
+      var this$ = this;
+      if (!this.queue[key]) {
+        this.queue[key] = f;
+      }
+      if (!this.running) {
+        this.running = true;
+        return requestAnimationFrame(function(it){
+          return this$.main(it);
+        });
+      }
+    }
+  };
+  window.ldBar = ldBar = function(selector, option){
+    var xmlns, root, cls, idPrefix, id, domTree, newNode, x$, config, attr, that, isStroke, parseRes, dom, svg, text, group, length, path0, path1, patimg, img, ret, size, this$ = this;
+    option == null && (option = {});
+    xmlns = {
+      xlink: "http://www.w3.org/1999/xlink"
+    };
+    root = toString$.call(selector).slice(8, -1) === 'String' ? document.querySelector(selector) : selector;
+    if (!root.ldBar) {
+      root.ldBar = this;
+    } else {
+      return root.ldBar;
+    }
+    cls = root.getAttribute('class') || '';
+    if (!~cls.indexOf('ldBar')) {
+      root.setAttribute('class', cls + " ldBar");
+    }
+    idPrefix = "ldBar-" + Math.random().toString(16).substring(2);
+    id = {
+      key: idPrefix,
+      clip: idPrefix + "-clip",
+      filter: idPrefix + "-filter",
+      pattern: idPrefix + "-pattern",
+      mask: idPrefix + "-mask",
+      maskPath: idPrefix + "-mask-path"
+    };
+    domTree = function(n, o){
+      var k, v;
+      n = newNode(n);
+      for (k in o) {
+        v = o[k];
+        if (k !== 'attr') {
+          n.appendChild(domTree(k, v || {}));
+        }
+      }
+      n.attrs(o.attr || {});
+      return n;
+    };
+    newNode = function(n){
+      return document.createElementNS("http://www.w3.org/2000/svg", n);
+    };
+    x$ = document.body.__proto__.__proto__.__proto__;
+    x$.text = function(t){
+      return this.appendChild(document.createTextNode(t));
+    };
+    x$.attrs = function(o){
+      var k, v, ret, results$ = [];
+      for (k in o) {
+        v = o[k];
+        ret = /([^:]+):([^:]+)/.exec(k);
+        if (!ret || !xmlns[ret[1]]) {
+          results$.push(this.setAttribute(k, v));
+        } else {
+          results$.push(this.setAttributeNS(xmlns[ret[1]], k, v));
+        }
+      }
+      return results$;
+    };
+    x$.styles = function(o){
+      var k, v, results$ = [];
+      for (k in o) {
+        v = o[k];
+        results$.push(this.style[k] = v);
+      }
+      return results$;
+    };
+    x$.append = function(n){
+      var r;
+      return this.appendChild(r = document.createElementNS("http://www.w3.og/2000/svg", n));
+    };
+    x$.attr = function(n, v){
+      if (v != null) {
+        return this.setAttribute(n, v);
+      } else {
+        return this.getAttribute(n);
+      }
+    };
+    config = {
+      "type": 'stroke',
+      "img": '',
+      "path": 'M10 10L90 10M90 8M90 12',
+      "fill-dir": 'btt',
+      "fill": '#25b',
+      "fill-background": '#ddd',
+      "fill-background-extrude": 3,
+      "pattern-size": null,
+      "stroke-dir": 'normal',
+      "stroke": '#25b',
+      "stroke-width": '3',
+      "stroke-trail": '#ddd',
+      "stroke-trail-width": 0.5,
+      "duration": 1,
+      "easing": 'linear',
+      "value": 0,
+      "img-size": null,
+      "bbox": null,
+      "set-dim": true,
+      "aspect-ratio": "xMidYMid",
+      "transition-in": false,
+      "min": 0,
+      "max": 100,
+      "precision": 0,
+      "padding": undefined
+    };
+    config["preset"] = root.attr("data-preset") || option["preset"];
+    if (config.preset != null) {
+      import$(config, presets[config.preset]);
+    }
+    for (attr in config) {
+      if (that = that = root.attr("data-" + attr)) {
+        config[attr] = that;
+      }
+    }
+    import$(config, option);
+    if (config.img) {
+      config.path = null;
+    }
+    isStroke = config.type === 'stroke';
+    parseRes = function(v){
+      var parser, ret;
+      parser = /data:ldbar\/res,([^()]+)\(([^)]+)\)/;
+      ret = parser.exec(v);
+      if (!ret) {
+        return v;
+      }
+      return ret = make[ret[1]].apply(make, ret[2].split(','));
+    };
+    config.fill = parseRes(config.fill);
+    config.stroke = parseRes(config.stroke);
+    if (config["set-dim"] === 'false') {
+      config["set-dim"] = false;
+    }
+    dom = {
+      attr: {
+        "xmlns:xlink": 'http://www.w3.org/1999/xlink',
+        preserveAspectRatio: config["aspect-ratio"],
+        width: "100%",
+        height: "100%"
+      },
+      defs: {
+        filter: {
+          attr: {
+            id: id.filter,
+            x: -1,
+            y: -1,
+            width: 3,
+            height: 3
+          },
+          feMorphology: {
+            attr: {
+              operator: +config["fill-background-extrude"] >= 0 ? 'dilate' : 'erode',
+              radius: Math.abs(+config["fill-background-extrude"])
+            }
+          },
+          feColorMatrix: {
+            attr: {
+              values: '0 0 0 0 1    0 0 0 0 1    0 0 0 0 1    0 0 0 1 0',
+              result: "cm"
+            }
+          }
+        },
+        mask: {
+          attr: {
+            id: id.mask
+          },
+          image: {
+            attr: {
+              "xlink:href": config.img,
+              filter: "url(#" + id.filter + ")",
+              x: 0,
+              y: 0,
+              width: 100,
+              height: 100,
+              preserveAspectRatio: config["aspect-ratio"]
+            }
+          }
+        },
+        g: {
+          mask: {
+            attr: {
+              id: id.maskPath
+            },
+            path: {
+              attr: {
+                d: config.path || "",
+                fill: '#fff',
+                stroke: '#fff',
+                filter: "url(#" + id.filter + ")"
+              }
+            }
+          }
+        },
+        clipPath: {
+          attr: {
+            id: id.clip
+          },
+          rect: {
+            attr: {
+              'class': 'mask',
+              fill: '#000'
+            }
+          }
+        },
+        pattern: {
+          attr: {
+            id: id.pattern,
+            patternUnits: 'userSpaceOnUse',
+            x: 0,
+            y: 0,
+            width: 300,
+            height: 300
+          },
+          image: {
+            attr: {
+              x: 0,
+              y: 0,
+              width: 300,
+              height: 300
+            }
+          }
+        }
+      }
+    };
+    svg = domTree('svg', dom);
+    text = document.createElement('div');
+    text.setAttribute('class', 'ldBar-label');
+    root.appendChild(svg);
+    root.appendChild(text);
+    group = [0, 0];
+    length = 0;
+    this.fit = function(){
+      var that, box, d, rect;
+      if (that = config["bbox"]) {
+        box = that.split(' ').map(function(it){
+          return +it.trim();
+        });
+        box = {
+          x: box[0],
+          y: box[1],
+          width: box[2],
+          height: box[3]
+        };
+      } else {
+        box = group[1].getBBox();
+      }
+      if (!box || box.width === 0 || box.height === 0) {
+        box = {
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100
+        };
+      }
+      d = Math.max.apply(null, ['stroke-width', 'stroke-trail-width', 'fill-background-extrude'].map(function(it){
+        return config[it];
+      })) * 1.5;
+      if (config["padding"] != null) {
+        d = +config["padding"];
+      }
+      svg.attrs({
+        viewBox: [box.x - d, box.y - d, box.width + d * 2, box.height + d * 2].join(" ")
+      });
+      if (config["set-dim"]) {
+        ['width', 'height'].map(function(it){
+          if (!root.style[it] || this$.fit[it]) {
+            root.style[it] = (box[it] + d * 2) + "px";
+            return this$.fit[it] = true;
+          }
+        });
+      }
+      rect = group[0].querySelector('rect');
+      if (rect) {
+        return rect.attrs({
+          x: box.x - d,
+          y: box.y - d,
+          width: box.width + d * 2,
+          height: box.height + d * 2
+        });
+      }
+    };
+    if (config.path) {
+      if (isStroke) {
+        group[0] = domTree('g', {
+          path: {
+            attr: {
+              d: config.path,
+              fill: 'none',
+              'class': 'baseline'
+            }
+          }
+        });
+      } else {
+        group[0] = domTree('g', {
+          rect: {
+            attr: {
+              x: 0,
+              y: 0,
+              width: 100,
+              height: 100,
+              mask: "url(#" + id.maskPath + ")",
+              fill: config["fill-background"],
+              'class': 'frame'
+            }
+          }
+        });
+      }
+      svg.appendChild(group[0]);
+      group[1] = domTree('g', {
+        path: {
+          attr: {
+            d: config.path,
+            'class': isStroke ? 'mainline' : 'solid',
+            "clip-path": config.type === 'fill' ? "url(#" + id.clip + ")" : ''
+          }
+        }
+      });
+      svg.appendChild(group[1]);
+      path0 = group[0].querySelector(isStroke ? 'path' : 'rect');
+      path1 = group[1].querySelector('path');
+      if (isStroke) {
+        path1.attrs({
+          fill: 'none'
+        });
+      }
+      patimg = svg.querySelector('pattern image');
+      img = new Image();
+      img.addEventListener('load', function(){
+        var box, that;
+        box = (that = config["pattern-size"])
+          ? {
+            width: +that,
+            height: +that
+          }
+          : img.width && img.height
+            ? {
+              width: img.width,
+              height: img.height
+            }
+            : {
+              width: 300,
+              height: 300
+            };
+        svg.querySelector('pattern').attrs({
+          width: box.width,
+          height: box.height
+        });
+        return patimg.attrs({
+          width: box.width,
+          height: box.height
+        });
+      });
+      if (/.+\..+|^data:/.exec(!isStroke
+        ? config.fill
+        : config.stroke)) {
+        img.src = !isStroke
+          ? config.fill
+          : config.stroke;
+        patimg.attrs({
+          "xlink:href": img.src
+        });
+      }
+      if (isStroke) {
+        path0.attrs({
+          stroke: config["stroke-trail"],
+          "stroke-width": config["stroke-trail-width"]
+        });
+        path1.attrs({
+          "stroke-width": config["stroke-width"],
+          stroke: /.+\..+|^data:/.exec(config.stroke)
+            ? "url(#" + id.pattern + ")"
+            : config.stroke
+        });
+      }
+      if (config.fill && !isStroke) {
+        path1.attrs({
+          fill: /.+\..+|^data:/.exec(config.fill)
+            ? "url(#" + id.pattern + ")"
+            : config.fill
+        });
+      }
+      length = path1.getTotalLength();
+      this.fit();
+      this.inited = true;
+    } else if (config.img) {
+      if (config["img-size"]) {
+        ret = config["img-size"].split(',');
+        size = {
+          width: +ret[0],
+          height: +ret[1]
+        };
+      } else {
+        size = {
+          width: 100,
+          height: 100
+        };
+      }
+      group[0] = domTree('g', {
+        rect: {
+          attr: {
+            x: 0,
+            y: 0,
+            width: 100,
+            height: 100,
+            mask: "url(#" + id.mask + ")",
+            fill: config["fill-background"]
+          }
+        }
+      });
+      svg.querySelector('mask image').attrs({
+        width: size.width,
+        height: size.height
+      });
+      group[1] = domTree('g', {
+        image: {
+          attr: {
+            width: size.width,
+            height: size.height,
+            x: 0,
+            y: 0,
+            preserveAspectRatio: config["aspect-ratio"],
+            "clip-path": config.type === 'fill' ? "url(#" + id.clip + ")" : '',
+            "xlink:href": config.img,
+            'class': 'solid'
+          }
+        }
+      });
+      img = new Image();
+      img.addEventListener('load', function(){
+        var ret, size, v;
+        if (config["img-size"]) {
+          ret = config["img-size"].split(',');
+          size = {
+            width: +ret[0],
+            height: +ret[1]
+          };
+        } else if (img.width && img.height) {
+          size = {
+            width: img.width,
+            height: img.height
+          };
+        } else {
+          size = {
+            width: 100,
+            height: 100
+          };
+        }
+        svg.querySelector('mask image').attrs({
+          width: size.width,
+          height: size.height
+        });
+        group[1].querySelector('image').attrs({
+          width: size.width,
+          height: size.height
+        });
+        this$.fit();
+        v = this$.value;
+        this$.value = undefined;
+        this$.set(v, true);
+        return this$.inited = true;
+      });
+      img.src = config.img;
+      svg.appendChild(group[0]);
+      svg.appendChild(group[1]);
+    }
+    svg.attrs({
+      width: '100%',
+      height: '100%'
+    });
+    this.transition = {
+      value: {
+        src: 0,
+        des: 0
+      },
+      time: {},
+      ease: function(t, b, c, d){
+        t = t / (d * 0.5);
+        if (t < 1) {
+          return c * 0.5 * t * t + b;
+        }
+        t = t - 1;
+        return -c * 0.5 * (t * (t - 2) - 1) + b;
+      },
+      handler: function(time, doTransition){
+        var ref$, min, max, prec, dv, dt, dur, v, p, node, style, box, dir;
+        doTransition == null && (doTransition = true);
+        if (this.time.src == null) {
+          this.time.src = time;
+        }
+        ref$ = [config["min"], config["max"], 1 / config["precision"]], min = ref$[0], max = ref$[1], prec = ref$[2];
+        ref$ = [this.value.des - this.value.src, (time - this.time.src) * 0.001, +config["duration"] || 1], dv = ref$[0], dt = ref$[1], dur = ref$[2];
+        v = doTransition
+          ? this.ease(dt, this.value.src, dv, dur)
+          : this.value.des;
+        if (config.precision) {
+          v = Math.round(v * prec) / prec;
+        } else if (doTransition) {
+          v = Math.round(v);
+        }
+        v >= min || (v = min);
+        v <= max || (v = max);
+        text.textContent = v;
+        p = 100.0 * (v - min) / (max - min);
+        if (isStroke) {
+          node = path1;
+          style = {
+            "stroke-dasharray": config["stroke-dir"] === 'reverse'
+              ? "0 " + length * (100 - p) * 0.01 + " " + length * p * 0.01 + " 0"
+              : p * 0.01 * length + " " + ((100 - p) * 0.01 * length + 1)
+          };
+        } else {
+          box = group[1].getBBox();
+          dir = config["fill-dir"];
+          style = dir === 'btt' || !dir
+            ? {
+              y: box.y + box.height * (100 - p) * 0.01,
+              height: box.height * p * 0.01,
+              x: box.x,
+              width: box.width
+            }
+            : dir === 'ttb'
+              ? {
+                y: box.y,
+                height: box.height * p * 0.01,
+                x: box.x,
+                width: box.width
+              }
+              : dir === 'ltr'
+                ? {
+                  y: box.y,
+                  height: box.height,
+                  x: box.x,
+                  width: box.width * p * 0.01
+                }
+                : dir === 'rtl' ? {
+                  y: box.y,
+                  height: box.height,
+                  x: box.x + box.width * (100 - p) * 0.01,
+                  width: box.width * p * 0.01
+                } : void 8;
+          node = svg.querySelector('rect');
+        }
+        node.attrs(style);
+        if (dt >= dur) {
+          delete this.time.src;
+          return false;
+        }
+        return true;
+      },
+      start: function(src, des, doTransition){
+        var ref$, this$ = this;
+        ref$ = this.value;
+        ref$.src = src;
+        ref$.des = des;
+        !!(root.offsetWidth || root.offsetHeight || root.getClientRects().length);
+        if (!doTransition || !(root.offsetWidth || root.offsetHeight || root.getClientRects().length)) {
+          this.time.src = 0;
+          this.handler(1000, false);
+          return;
+        }
+        return handler.add(id.key, function(time){
+          return this$.handler(time);
+        });
+      }
+    };
+    this.set = function(v, doTransition){
+      var src, des;
+      doTransition == null && (doTransition = true);
+      src = this.value || 0;
+      if (v != null) {
+        this.value = v;
+      } else {
+        v = this.value;
+      }
+      des = this.value;
+      return this.transition.start(src, des, doTransition);
+    };
+    this.set(+config.value || 0, config["transition-in"]) || false;
+    return this;
+  };
+  return window.addEventListener('load', function(){
+    var i$, ref$, len$, node, results$ = [];
+    for (i$ = 0, len$ = (ref$ = document.querySelectorAll('.ldBar')).length; i$ < len$; ++i$) {
+      node = ref$[i$];
+      if (!node.ldBar) {
+        results$.push(node.ldBar = new ldBar(node));
+      }
+    }
+    return results$;
+  }, false);
+})();
+module.exports = ldBar;
+function import$(obj, src){
+  var own = {}.hasOwnProperty;
+  for (var key in src) if (own.call(src, key)) obj[key] = src[key];
+  return obj;
+}
+
+},{"./presets":2}],2:[function(require,module,exports){
+// Generated by LiveScript 1.3.1
+var presets, out$ = typeof exports != 'undefined' && exports || this;
+out$.presets = presets = {
+  rainbow: {
+    "type": 'stroke',
+    "path": 'M10 10L90 10',
+    "stroke": 'data:ldbar/res,gradient(0,1,#a551df,#fd51ad,#ff7f82,#ffb874,#ffeb90)',
+    "bbox": "10 10 80 10"
+  },
+  energy: {
+    "type": 'fill',
+    "path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5',
+    "stroke": '#f00',
+    "fill": 'data:ldbar/res,gradient(45,2,#4e9,#8fb,#4e9)',
+    "fill-dir": "ltr",
+    "fill-background": '#444',
+    "fill-background-extrude": 1,
+    "bbox": "10 5 80 10"
+  },
+  stripe: {
+    "type": 'fill',
+    "path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5',
+    "stroke": '#f00',
+    "fill": 'data:ldbar/res,stripe(#25b,#58e,1)',
+    "fill-dir": "ltr",
+    "fill-background": '#ddd',
+    "fill-background-extrude": 1,
+    "bbox": "10 5 80 10"
+  },
+  text: {
+    "type": 'fill',
+    "img": "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"20\" viewBox=\"0 0 70 20\"><text x=\"35\" y=\"10\" text-anchor=\"middle\" dominant-baseline=\"central\" font-family=\"arial\">LOADING</text></svg>",
+    "fill-background-extrude": 1.3,
+    "pattern-size": 100,
+    "fill-dir": "ltr",
+    "img-size": "70,20",
+    "bbox": "0 0 70 20"
+  },
+  line: {
+    "type": 'stroke',
+    "path": 'M10 10L90 10',
+    "stroke": '#25b',
+    "stroke-width": 3,
+    "stroke-trail": '#ddd',
+    "stroke-trail-width": 1,
+    "bbox": "10 10 80 10"
+  },
+  fan: {
+    "type": 'stroke',
+    "path": 'M10 90A40 40 0 0 1 90 90',
+    "fill-dir": 'btt',
+    "fill": '#25b',
+    "fill-background": '#ddd',
+    "fill-background-extrude": 3,
+    "stroke-dir": 'normal',
+    "stroke": '#25b',
+    "stroke-width": '3',
+    "stroke-trail": '#ddd',
+    "stroke-trail-width": 0.5,
+    "bbox": "10 50 80 40"
+  },
+  circle: {
+    "type": 'stroke',
+    "path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10',
+    "fill-dir": 'btt',
+    "fill": '#25b',
+    "fill-background": '#ddd',
+    "fill-background-extrude": 3,
+    "stroke-dir": 'normal',
+    "stroke": '#25b',
+    "stroke-width": '3',
+    "stroke-trail": '#ddd',
+    "stroke-trail-width": 0.5,
+    "bbox": "10 10 80 80"
+  },
+  bubble: {
+    "type": 'fill',
+    "path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10',
+    "fill-dir": 'btt',
+    "fill": 'data:ldbar/res,bubble(#39d,#cef)',
+    "pattern-size": "150",
+    "fill-background": '#ddd',
+    "fill-background-extrude": 2,
+    "stroke-dir": 'normal',
+    "stroke": '#25b',
+    "stroke-width": '3',
+    "stroke-trail": '#ddd',
+    "stroke-trail-width": 0.5,
+    "bbox": "10 10 80 80"
+  }
+};
+
+},{}]},{},[1]);

platforms/hybrid/assets/css/dist/loading-bar.min.css

@@ -0,0 +1 @@
+.ldBar{position:relative}.ldBar.label-center>.ldBar-label{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:0 0 3px #fff}.ldBar-label:after{content:"%";display:inline}.ldBar.no-percent .ldBar-label:after{content:""}

platforms/hybrid/assets/css/loading-bar.min.css

@@ -0,0 +1 @@
+.ldBar{position:relative}.ldBar.label-center>.ldBar-label{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:0 0 3px #fff}.ldBar-label:after{content:"%";display:inline}.ldBar.no-percent .ldBar-label:after{content:""}

platforms/hybrid/assets/css/preloader.css

@@ -0,0 +1,136 @@
+.loadingBarPanel{
+
+  transition: 1s;
+
+}
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: "proxima-nova-soft", sans-serif;
+  -webkit-user-select: none;
+  overflow: hidden;
+
+ 
+}
+body .vertical-centered-box {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+body .vertical-centered-box:after {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em;
+}
+body .vertical-centered-box .content {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 0;
+}
+* {
+  transition: all 0.3s;
+}
+body {
+
+}
+.loader-circle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  margin-left: -60px;
+  margin-top: -60px;
+
+}
+.loader-circle-dark {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #ffffff;
+  margin-left: -60px;
+  margin-top: -60px;
+
+}
+
+.loader-line-mask {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 60px;
+  height: 120px;
+  margin-left: -60px;
+  margin-top: -60px;
+  overflow: hidden;
+  transform-origin: 60px 60px;
+  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+  animation: rotate 1.2s infinite linear;
+}
+
+.loader-line-mask-dark {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 60px;
+  height: 120px;
+  margin-left: -60px;
+  margin-top: -60px;
+  overflow: hidden;
+  transform-origin: 60px 60px;
+  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
+  animation: rotate 1.2s infinite linear;
+}
+
+
+ .loader-line {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+ .loader-line-dark {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgb(38 91 226 / 82%);
+}
+
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

platforms/hybrid/assets/css/preloader2.css

@@ -0,0 +1,66 @@
+
+.circular {
+
+	-webkit-animation: 	rotate 2s linear infinite;
+	animation: 			rotate 2s linear infinite;
+
+}
+
+.path {
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke: white;
+  -webkit-animation: dash 1.5s ease-in-out infinite!important;
+          animation: dash 1.5s ease-in-out infinite!important;
+  stroke-linecap: round;
+}
+
+@-webkit-keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+
+.showbox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 5%;
+}

platforms/hybrid/assets/development/index.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+	<head>
+
+		<title>Unify</title>
+
+		<meta name="Description" content="An UnifyJS Application." class="metaDescription" />
+
+		<meta name="viewport" content="width=device-width, user-scalable=no">
+
+		<base url="http://localhost:3000">
+
+		<script src="/client/index.js" type="module"></script>
+		<script src="/assets/frameworks/chroma.js" ></script>
+		<script src="/assets/frameworks/ace/src-noconflict/ace.js"></script>	
+
+		<link href="/assets/favicon.ico" rel="icon" type="image/x-icon">
+		<link  href="/assets/css/unify.css" rel="stylesheet">
+		<link  href="/assets/css/unify.css" rel="stylesheet">
+		<link  href="/assets/css/preloader.css" rel="stylesheet">
+		<link  href="/assets/css/preloader2.css" rel="stylesheet">
+
+	</head>
+
+	<body>
+
+
+
+		<div class="loadingBarPanel vertical-centered-box">
+
+			<div class="loader-circle"></div>
+				<div class="loader-line-mask">
+					<div class="loader-line"></div>
+				</div>
+			</div>
+		</div>	 
+
+
+<!--
+
+	<svg class="circular" viewBox="25 25 50 50">
+		<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+	</svg>
+
+-->
+
+			
+		
+
+		<!--<div class="preloader" ></div>-->
+		<div id="application"></div>
+
+	</body>
+</html>

platforms/hybrid/assets/fonts/NotoSansTC/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2015-2021 Google LLC. All Rights Reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

platforms/hybrid/assets/fonts/android/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

platforms/hybrid/assets/production/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html lang="en">
+	<head>
+
+		<meta charset="utf-8"/>
+		<meta name="Description" content="Unify is an Nodejs Framework, Designed to make advanced next generation interactive applications." class="metaDescription" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<script src="/assets/bundle.js" type="module"></script>
+		<script src="/3rdparty/chroma.js" ></script>
+
+		<link href="/assets/css/unify.css" rel="stylesheet">
+		<link href="/assets/favicon.ico" rel="icon" type="image/x-icon">
+		<link href="/assets/css/unify.css" rel="stylesheet">
+		<link href="/assets/css/unify.css" rel="stylesheet">
+		<link href="/assets/css/preloader.css" rel="stylesheet">
+		<link href="/assets/css/preloader2.css" rel="stylesheet">
+		
+		<title>Unify</title>
+
+	</head>
+	<body>
+		<div class="loadingBarPanel vertical-centered-box">
+
+			<div class="loader-circle"></div>
+				<div class="loader-line-mask">
+					<div class="loader-line"></div>
+				</div>
+			</div>
+		</div>	 
+
+		<div id="application" >
+
+		</div>
+
+	</body>
+
+</html>