search

Akryum / vue-progress-path

Progress bars and loading indicators for Vue.js
https://akryum.github.io/vue-progress-path/
423 stars 38 forks source link

Flicker on load, wrong svg size #3

Open depiction opened 6 years ago

depiction commented 6 years ago

I've noticed two issues with the component that prevent me from using this on a project. I'm using the following settings:

<loading-progress
    :progress=".5"
    size="26"
/>

  1. There is a flicker on initial page load using Chrome. The svg fill starts out at 100% on load then goes to the set progress (50% in this case). I noticed this even on the demo page (https://akryum.github.io/vue-progress-path/).

  2. The SVG size doesn't match the size specified (26px). Instead it's 76px. The path is the correct size, but the SVG is too large, resulting in a lot of whitespace. I see in the source code where 50px is being added to the SVG size. That should be removed or should be configurable.

depiction commented 6 years ago

I discovered that the component accepts width and height props. It would still be nice if these were documented and it didn't add padding to the SVG by default.

The flicker is caused by the 300ms transition speed set on the path in the CSS. Ideally that transition should be associated with a class that isn't applied until the progress is first changed.