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

dasharray with units (fix for Firefox) #27

Browse Source
This commit is contained in:
lana-k
2021-04-24 16:54:16 +02:00
parent 24411ac18f
commit a469de3674
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/LoadingIndicator.vue
View File

@@ -24,7 +24,7 @@ export default {
circleProgress () { circleProgress () {
const dash = (50.24 * this.progress) / 100 const dash = (50.24 * this.progress) / 100
const space = 50.24 - dash const space = 50.24 - dash
return `${dash}, ${space}` return `${dash}px, ${space}px`
}, },
animationClass () { animationClass () {
return this.progress === undefined ? 'loading' : 'progress' return this.progress === undefined ? 'loading' : 'progress'
@@ -48,22 +48,22 @@ export default {
} }
.loading .loader-svg.front { .loading .loader-svg.front {
stroke-dasharray: 40.24; stroke-dasharray: 40.24px;
animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite; animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite;
} }
@keyframes fill-animation-loading { @keyframes fill-animation-loading {
0% { 0% {
stroke-dasharray: 10 40.24; stroke-dasharray: 10px 40.24px;
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
50% { 50% {
stroke-dasharray: 25.12; stroke-dasharray: 25.12px;
stroke-dashoffset: 25.12; stroke-dashoffset: 25.12px;
} }
100% { 100% {
stroke-dasharray: 10 40.24 ; stroke-dasharray: 10px 40.24px;
stroke-dashoffset: 50.24; stroke-dashoffset: 50.24px;
} }
} }

2
tests/components/LoadingIndicator.spec.js
View File

@@ -19,6 +19,6 @@ describe('LoadingIndicator.vue', () => {
}) })
// The lendth of circle in the component is 50.24. If progress is 50% then resulting arc // The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
// should be 25.12 // should be 25.12
expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray).to.equal('25.12, 25.12') expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray).to.equal('25.12px, 25.12px')
}) })
}) })