Spinner Scaleout now available

Spinner from: https://tobiasahlin.com/spinkit/
reviewable/pr3858/r1
Martin Filser 4 years ago
parent 55d0f0bacd
commit 6df7657c8e
  1. 6
      client/components/main/spinner_scaleout.jade
  2. 40
      client/components/main/spinner_scaleout.styl
  3. 1
      config/const.js

@ -0,0 +1,6 @@
template(name="spinnerScaleout")
.sk-spinner.sk-spinner-scaleout(class=currentBoard.colorClass)
+spinnerScaleoutRaw
template(name="spinnerScaleoutRaw")
.sk-scaleout1

@ -0,0 +1,40 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-scaleout {
width: 40px;
height: 40px;
text-align: center;
margin: 100px auto;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
div {
background-color: #333;
height: 100%;
width: 100%;
display: inline-block;
}
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}

@ -54,5 +54,6 @@ export const ALLOWED_WAIT_SPINNERS = [
'Cube', 'Cube',
'Dot', 'Dot',
'Rotateplane', 'Rotateplane',
'Scaleout',
'Wave' 'Wave'
]; ];

Loading…
Cancel
Save