diff --git a/client/components/main/spinner_rotateplane.jade b/client/components/main/spinner_rotateplane.jade new file mode 100644 index 000000000..35afeda81 --- /dev/null +++ b/client/components/main/spinner_rotateplane.jade @@ -0,0 +1,6 @@ +template(name="spinnerRotateplane") + .sk-spinner.sk-spinner-rotateplane(class=currentBoard.colorClass) + +spinnerRotateplaneRaw + +template(name="spinnerRotateplaneRaw") + .sk-rotateplane1 diff --git a/client/components/main/spinner_rotateplane.styl b/client/components/main/spinner_rotateplane.styl new file mode 100644 index 000000000..1f43d37e3 --- /dev/null +++ b/client/components/main/spinner_rotateplane.styl @@ -0,0 +1,38 @@ +@import 'nib' + +// From https://github.com/tobiasahlin/SpinKit +.sk-spinner-rotateplane { + width: 40px; + height: 40px; + text-align: center; + + margin: 100px auto; + -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; + animation: sk-rotateplane 1.2s infinite ease-in-out; + + div { + background-color: #333; + height: 100%; + width: 100%; + display: inline-block; + } +} + +@-webkit-keyframes sk-rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +} + +@keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} diff --git a/config/const.js b/config/const.js index d8cc9b81d..60f5d084d 100644 --- a/config/const.js +++ b/config/const.js @@ -53,5 +53,6 @@ export const ALLOWED_WAIT_SPINNERS = [ 'Bounce', 'Cube', 'Dot', + 'Rotateplane', 'Wave' ];