Commit 7496ceee authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

New loading animation

parent 618d0f0a
Pipeline #7091 passed with stages
in 5 minutes and 30 seconds
......@@ -6,7 +6,9 @@
</div>
</div>
<div class="fjs-loading-cover fjs-cover" v-show="showLoadingCover">
<loader class="fjs-loader"/>
<!--<div class="loader-container">-->
<loader class="fjs-loader"/>
<!--</div>-->
</div>
<div class="fjs-error-cover fjs-cover" v-show="showErrorCover">
<div>
......@@ -112,8 +114,7 @@
&:hover
box-shadow: inset 0 0 0 2px #e6e6e6
.fjs-loading-cover
div
span
.fjs-error-cover
div
span
......
<template>
<div class="fjs-loader"></div>
<div>
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
</template>
<script>
......@@ -9,24 +21,64 @@
</script>
<style lang="sass" scoped>
$size: 20px !default
$thickness: 3px !default
$base-color: #fff !default
$wheel-color: #c30 !default
$speed: 800ms !default
.fjs-loader
height: $size
width: $size
border: $thickness solid $base-color
border:
right-color: $wheel-color
top-color: $wheel-color
radius: 100%
animation: spin $speed infinite linear
@keyframes spin
from
transform: rotate(0deg)
to
transform: rotate(359deg)
.sk-cube-grid
width: 4vh
height: 4vh
margin: 100px auto
.sk-cube-grid .sk-cube
width: 33%
height: 33%
background-color: #a7f3ff
float: left
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out
.sk-cube-grid .sk-cube1
-webkit-animation-delay: 0.2s
animation-delay: 0.2s
.sk-cube-grid .sk-cube2
-webkit-animation-delay: 0.3s
animation-delay: 0.3s
.sk-cube-grid .sk-cube3
-webkit-animation-delay: 0.4s
animation-delay: 0.4s
.sk-cube-grid .sk-cube4
-webkit-animation-delay: 0.1s
animation-delay: 0.1s
.sk-cube-grid .sk-cube5
-webkit-animation-delay: 0.2s
animation-delay: 0.2s
.sk-cube-grid .sk-cube6
-webkit-animation-delay: 0.3s
animation-delay: 0.3s
.sk-cube-grid .sk-cube7
-webkit-animation-delay: 0s
animation-delay: 0s
.sk-cube-grid .sk-cube8
-webkit-animation-delay: 0.1s
animation-delay: 0.1s
.sk-cube-grid .sk-cube9
-webkit-animation-delay: 0.2s
animation-delay: 0.2s
@-webkit-keyframes sk-cubeGridScaleDelay
0%, 70%, 100%
-webkit-transform: scale3D(1, 1, 1)
transform: scale3D(1, 1, 1)
35%
-webkit-transform: scale3D(0, 0, 1)
transform: scale3D(0, 0, 1)
@keyframes sk-cubeGridScaleDelay
0%, 70%, 100%
-webkit-transform: scale3D(1, 1, 1)
transform: scale3D(1, 1, 1)
35%
-webkit-transform: scale3D(0, 0, 1)
transform: scale3D(0, 0, 1)
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment