add spinner

3 files changed, 32 insertions, 1 deletions

diff --git a/www/css/index.css b/www/css/index.css
index 66f0b32..fde07dc 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -336,3 +336,9 @@ input[type="checkbox"]:checked + span:before {
   75% { opacity: 1; }
   100% { opacity: 0; }
 }
+
+.spinner {
+  opacity: 0;
+  -webkit-transition: opacity 2s;
+  transition: opacity 2s;
+}
diff --git a/www/js/api.js b/www/js/api.js
index 225cf38..0dd7951 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -1,3 +1,4 @@
+"use strict";
 window.html5ks.api = {
   init: function () {
     var chrs = html5ks.data.characters;
@@ -48,10 +49,13 @@ window.html5ks.api = {
       return false;
     };
 
+    html5ks.spin(1);
+
     _nextType();
 
     el.oncanplaythrough = function () {
       el.play();
+      html5ks.spin(-1);
     };
 
     el.onerror = function (e) {
@@ -260,6 +264,7 @@ window.html5ks.api = {
     var lookup = document.getElementById(name),
         el = lookup || document.createElement("img");
     if (!location && !lookup) location = "center";
+    html5ks.spin(1);
     el.onload = function () {
       if (location) {
         // calculate position
@@ -273,10 +278,12 @@ window.html5ks.api = {
         }
         el.style.display = "block";
       }
+      html5ks.spin(-1);
       deferred.resolve();
     };
     el.onerror = function () {
       el.parentNode.removeChild(el);
+      html5ks.spin(-1);
       deferred.resolve();
     };
     var nom = name;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 1f52c52..40765e1 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -77,8 +77,26 @@ window.html5ks = {
       nvlsay: document.getElementById("nvlsay"),
       nvlctc: document.getElementById("nvlctc"),
       choices: document.getElementById("choices"),
-      show: document.getElementById("show")
+      show: document.getElementById("show"),
     };
+    this.elements.spinner = new Spinner({
+      color: '#CC7C2A',
+      hwaccel: true,
+      length: 30,
+      lines: 15,
+      radius: 60,
+      width: 15
+    }).spin(this.elements.container).el;
+  },
+  _spinners: 0,
+  _spintm: null,
+  spin: function (mod) {
+    clearTimeout(this._spintm);
+    this._spintm = setTimeout(function () {
+      html5ks.elements.spinner.style.opacity = html5ks._spinners === 0 ? 0 : 1;
+    }, 1000);
+    this._spinners += mod;
+    console.assert(this._spinners >= 0);
   },
   scale: function () {
     var newScale = 1;