Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flicker on load, wrong svg size #3

Open
depiction opened this issue May 21, 2018 · 1 comment
Open

Flicker on load, wrong svg size #3

depiction opened this issue May 21, 2018 · 1 comment

Comments

@depiction
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant