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 @@ ...@@ -6,7 +6,9 @@
</div> </div>
</div> </div>
<div class="fjs-loading-cover fjs-cover" v-show="showLoadingCover"> <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>
<div class="fjs-error-cover fjs-cover" v-show="showErrorCover"> <div class="fjs-error-cover fjs-cover" v-show="showErrorCover">
<div> <div>
...@@ -112,8 +114,7 @@ ...@@ -112,8 +114,7 @@
&:hover &:hover
box-shadow: inset 0 0 0 2px #e6e6e6 box-shadow: inset 0 0 0 2px #e6e6e6
.fjs-loading-cover .fjs-loading-cover
div
span
.fjs-error-cover .fjs-error-cover
div div
span span
......
<template> <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> </template>
<script> <script>
...@@ -9,24 +21,64 @@ ...@@ -9,24 +21,64 @@
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
$size: 20px !default .sk-cube-grid
$thickness: 3px !default width: 4vh
$base-color: #fff !default height: 4vh
$wheel-color: #c30 !default margin: 100px auto
$speed: 800ms !default
.fjs-loader .sk-cube-grid .sk-cube
height: $size width: 33%
width: $size height: 33%
border: $thickness solid $base-color background-color: #a7f3ff
border: float: left
right-color: $wheel-color -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out
top-color: $wheel-color animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out
radius: 100%
animation: spin $speed infinite linear .sk-cube-grid .sk-cube1
-webkit-animation-delay: 0.2s
@keyframes spin animation-delay: 0.2s
from .sk-cube-grid .sk-cube2
transform: rotate(0deg) -webkit-animation-delay: 0.3s
to animation-delay: 0.3s
transform: rotate(359deg) .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> </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