From 45927f6299dfc15ae7855a324a560723dd8d0e7a Mon Sep 17 00:00:00 2001 From: Patrick Walton Date: Sat, 16 Sep 2017 10:41:25 -0700 Subject: [PATCH] Add a CSS spinner to the HTML templates. This will allow us to make loading a nicer experience. Source: http://tobiasahlin.com/spinkit/ --- demo/client/css/pathfinder.css | 161 +++++++++++++++++++++ demo/client/html/3d-demo.html.hbs | 1 + demo/client/html/mesh-debugger.html.hbs | 1 + demo/client/html/partials/spinner.html.hbs | 15 ++ demo/client/html/svg-demo.html.hbs | 1 + demo/client/html/text-demo.html.hbs | 1 + 6 files changed, 180 insertions(+) create mode 100644 demo/client/html/partials/spinner.html.hbs diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css index 46a12e2c..60bb9608 100644 --- a/demo/client/css/pathfinder.css +++ b/demo/client/css/pathfinder.css @@ -1,3 +1,7 @@ +/* + * Core + */ + body.pf-unscrollable { overflow: hidden; } @@ -81,6 +85,22 @@ button > svg path { #pf-svg { visibility: hidden; } +#pf-spinner { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.pf-spinner-hidden { + display: none !important; +} + +/* + * Arrow + * + * http://www.cssarrowplease.com/ + */ .pf-arrow-box:after, .pf-arrow-box:before { top: 100%; @@ -141,3 +161,144 @@ button > svg path { animation: octocat-wave 560ms ease-in-out; } } + +/* + * Spinner + * + * http://tobiasahlin.com/spinkit/ + */ + +.sk-fading-circle { + margin: auto; + width: 40px; + height: 40px; +} + +.sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; +} +.sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); +} +.sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); +} +.sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); +} +.sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); +} +.sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); +} +.sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); +} +.sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); +} +.sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); +} +.sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} +.sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +.sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} +.sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} +.sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} +.sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} +.sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} +.sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} +.sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} +.sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} +.sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} diff --git a/demo/client/html/3d-demo.html.hbs b/demo/client/html/3d-demo.html.hbs index f6c15ae8..c9859ebe 100644 --- a/demo/client/html/3d-demo.html.hbs +++ b/demo/client/html/3d-demo.html.hbs @@ -44,5 +44,6 @@ + {{>partials/spinner.html}} diff --git a/demo/client/html/mesh-debugger.html.hbs b/demo/client/html/mesh-debugger.html.hbs index 7bf4acd8..286488f4 100644 --- a/demo/client/html/mesh-debugger.html.hbs +++ b/demo/client/html/mesh-debugger.html.hbs @@ -9,5 +9,6 @@ {{>partials/navbar.html isTool=true}} + {{>partials/spinner.html}} diff --git a/demo/client/html/partials/spinner.html.hbs b/demo/client/html/partials/spinner.html.hbs new file mode 100644 index 00000000..f45459cd --- /dev/null +++ b/demo/client/html/partials/spinner.html.hbs @@ -0,0 +1,15 @@ + + diff --git a/demo/client/html/svg-demo.html.hbs b/demo/client/html/svg-demo.html.hbs index 2b827adc..822ee431 100644 --- a/demo/client/html/svg-demo.html.hbs +++ b/demo/client/html/svg-demo.html.hbs @@ -62,5 +62,6 @@ aria-controls="#pf-settings">{{octicon "gear"}} + {{>partials/spinner.html}} diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs index c2147658..2bc16265 100644 --- a/demo/client/html/text-demo.html.hbs +++ b/demo/client/html/text-demo.html.hbs @@ -104,5 +104,6 @@ + {{>partials/spinner.html}}