github-mirrors/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-04-20 12:07:11 -04:00
Code Issues Projects Releases Packages Wiki Activity

Spinner Cube now available

Browse source 
Spinner from: https://tobiasahlin.com/spinkit/
This commit is contained in:
Martin Filser 2021-06-09 20:28:07 +02:00
parent 4b9f8ab2b1
commit 8aa58c0b11
3 changed files with 61 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/components/main/spinner_cube.jade Normal file
View file

@ -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

52
client/components/main/spinner_cube.styl Normal file
View file

@ -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);
}
}

1
config/const.js
View file

@ -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'
];