diff --git a/client/components/main/spinner_cube.jade b/client/components/main/spinner_cube.jade new file mode 100644 index 000000000..696d2f5ad --- /dev/null +++ b/client/components/main/spinner_cube.jade @@ -0,0 +1,8 @@ +template(name="spinnerCube") + .sk-spinner.sk-spinner-cube(class=currentBoard.colorClass) + +spinnerCubeRaw + +template(name="spinnerCubeRaw") + .sk-cube1 + .sk-cube2 + .sk-cube3 diff --git a/client/components/main/spinner_cube.styl b/client/components/main/spinner_cube.styl new file mode 100644 index 000000000..92e6e2a11 --- /dev/null +++ b/client/components/main/spinner_cube.styl @@ -0,0 +1,52 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-cube { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; +} + +.sk-cube1, .sk-cube2 { + background-color: #333; + width: 15px; + height: 15px; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; + animation: sk-cubemove 1.8s infinite ease-in-out; +} + +.sk-cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +@-webkit-keyframes sk-cubemove { + 25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) } + 50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) } + 75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) } + 100% { -webkit-transform: rotate(-360deg) } +} + +@keyframes sk-cubemove { + 25% { + transform: translateX(35px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } 50% { + transform: translateX(35px) translateY(35px) rotate(-179deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); + } 50.1% { + transform: translateX(35px) translateY(35px) rotate(-180deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } 75% { + transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} diff --git a/config/const.js b/config/const.js index 7dac4e83e..a99b00590 100644 --- a/config/const.js +++ b/config/const.js @@ -51,5 +51,6 @@ export const TYPE_TEMPLATE_BOARD = 'template-board'; export const TYPE_TEMPLATE_CONTAINER = 'template-container'; export const ALLOWED_WAIT_SPINNERS = [ 'Bounce', + 'Cube', 'Wave' ];