diff --git a/client/components/main/spinner_double_bounce.jade b/client/components/main/spinner_double_bounce.jade new file mode 100644 index 000000000..206a468d2 --- /dev/null +++ b/client/components/main/spinner_double_bounce.jade @@ -0,0 +1,7 @@ +template(name="spinnerDoubleBounce") + .sk-spinner.sk-spinner-double-bounce(class=currentBoard.colorClass) + +spinnerDoubleBounceRaw + +template(name="spinnerDoubleBounceRaw") + .sk-double-bounce1 + .sk-double-bounce2 diff --git a/client/components/main/spinner_double_bounce.styl b/client/components/main/spinner_double_bounce.styl new file mode 100644 index 000000000..2ef000361 --- /dev/null +++ b/client/components/main/spinner_double_bounce.styl @@ -0,0 +1,44 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-double-bounce { + width: 40px; + height: 40px; + + position: relative; + margin: 100px auto; +} + +.sk-double-bounce1, .sk-double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: sk-bounce 2.0s infinite ease-in-out; + animation: sk-bounce 2.0s infinite ease-in-out; +} + +.sk-double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes sk-bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} diff --git a/config/const.js b/config/const.js index 4271bd5ef..a275ffa6b 100644 --- a/config/const.js +++ b/config/const.js @@ -54,6 +54,7 @@ export const ALLOWED_WAIT_SPINNERS = [ 'Cube', 'Cube-Grid', 'Dot', + 'Double-Bounce', 'Rotateplane', 'Scaleout', 'Wave'