#30 KeyGeneratingSection: add spinner

fxnn · Jan 20, 2018 · cc8030c · cc8030c
1 parent 64baef4
commit cc8030c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -22,6 +22,7 @@
     "npm-run-all": "^4.1.2",
     "promise": "8.0.1",
     "rimraf": "2.6.2",
+    "spinkit": "1.2.5",
     "style-loader": "0.19.1",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",

diff --git a/webapp/src/app/Spinner.js b/webapp/src/app/Spinner.js
@@ -0,0 +1,6 @@
+import {h} from "hyperapp"
+import "./Spinner.css"
+
+export const Spinner = () => (
+  h("div", {class:"sk-cube-grid"}, [...Array(9)].map((_,i)=>h("div", {class:"sk-cube sk-cube" + (i+1)})))
+);
diff --git a/webapp/src/app/Spinner.scss b/webapp/src/app/Spinner.scss
@@ -0,0 +1,8 @@
+
+$spinkit-spinner-margin: 2em auto;
+$spinkit-size: 3em;
+$spinkit-spinner-color: #ffffff;
+
+//@import "spinkit/scss/spinners/2-double-bounce";
+@import "spinkit/scss/spinners/9-cube-grid";
+
diff --git a/webapp/src/encryption/KeyGeneratingSection.js b/webapp/src/encryption/KeyGeneratingSection.js
@@ -1,4 +1,5 @@
 import { h } from "hyperapp"
+import { Spinner } from "app/Spinner";
 
 export const KeyGeneratingSection = ({ logo }) => (
   h("section", {class:"hero is-success is-fullheight"}, [
@@ -7,6 +8,7 @@ export const KeyGeneratingSection = ({ logo }) => (
         h("h1", {class:"title"}, [
           logo
         ]),
+        h(Spinner),
         h("p", {}, "Your key is generated, please wait ...")
       ])
     ])