zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

add tests for LoadingIndicator component #27

Browse Source
This commit is contained in:
lana-k
2021-04-12 16:06:41 +02:00
parent a7c8c29624
commit be56079e4e
2 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/LoadingIndicator.vue
View File

@@ -1,13 +1,13 @@
<template>
<svg class="svg-container" height="20" width="20" viewBox="0 0 20 20">
<svg :class="['svg-container', animationClass ]" height="20" width="20" viewBox="0 0 20 20">
<circle
:class="['loader-svg', 'bg', {'animate-bg': animationClass === 'progress' }]"
class="loader-svg bg"
cx="10"
cy="10"
r="8"
/>
<circle
:class="['loader-svg', animationClass ]"
class="loader-svg front"
:style="{ strokeDasharray: circleProgress }"
cx="10"
cy="10"
@@ -47,24 +47,7 @@ export default {
stroke: var(--color-gray-light-3);
}
.animate-bg{
animation: bg-animation 1.5s cubic-bezier(1,1,1,1) 0s infinite;
}
@keyframes bg-animation{
0% {
r: 8;
}
50% {
stroke: var(--color-gray-light-2);
r: 9;
}
100% {
r: 8;
}
}
.loading {
.loading .loader-svg.front {
stroke-dasharray: 40.24;
animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite;
}
@@ -84,8 +67,26 @@ export default {
}
}
.progress {
.progress .loader-svg.front {
stroke-dashoffset: 12.56;
transition: stroke-dasharray 0.2s;
}
.progress .loader-svg.bg {
animation: bg-animation 1.5s cubic-bezier(1,1,1,1) 0s infinite;
}
@keyframes bg-animation{
0% {
r: 8;
}
50% {
stroke: var(--color-gray-light-2);
r: 9;
}
100% {
r: 8;
}
}
</style>