zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 10:08:52 +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 () {
const dash = (50.24 * this.progress) / 100
const space = 50.24 - dash
return `${dash}, ${space}`
return `${dash}px, ${space}px`
},
animationClass () {
return this.progress === undefined ? 'loading' : 'progress'
@@ -48,22 +48,22 @@ export default {
}
.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;
}
@keyframes fill-animation-loading {
0% {
stroke-dasharray: 10 40.24;
stroke-dasharray: 10px 40.24px;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 25.12;
stroke-dashoffset: 25.12;
stroke-dasharray: 25.12px;
stroke-dashoffset: 25.12px;
}
100% {
stroke-dasharray: 10 40.24 ;
stroke-dashoffset: 50.24;
stroke-dasharray: 10px 40.24px;
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
// 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')
})
})