akryum / vue-progress-path Goto Github PK
View Code? Open in Web Editor NEWProgress bars and loading indicators for Vue.js
Home Page: https://akryum.github.io/vue-progress-path/
Progress bars and loading indicators for Vue.js
Home Page: https://akryum.github.io/vue-progress-path/
In the docs you show the css we can use to change the look of the loading bar, I added the classes and tried to use them with the loading progress component but nothing changed. Could you please post an example on how to change the color?
I'm interested to know how to add multiple progress loaders on a component with different stroke colors. I'm running into issues adding my own stroke color to each of them.
I'm looking to do something like this
.vue-progress-path .progress-one {
stroke: red;
}
.vue-progress-path .progress-two {
stroke: blue;
}
.vue-progress-path .progress-three {
stroke: green;
}
When complex shapes are put in the path attribute, the automatic stroke-dasharray length is much too long, which causes each iteration to have a lot of downtime(time when the dash isn't looping)
Is there any way to set the size of the progress item to fill the parent container? Looks like only absolute values are supported, while the scenario I have requires setting the width and height to 100%
followed instructions, just renders a solid black shape, no animation regardless of progress/indeterminate passed in to model.
Object.assign is not transpiled to ES5. Maybe babel can't do it properly.
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"
/>
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/).
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.
on npm install
src/index.js โ dist/vue-progress-path.min.js...
[!] (vue plugin) Error: Unknown transform 'collections'
src/components/Progress.vue
Error: Unknown transform 'collections'
at error (vue-progress-path/node_modules/rollup/dist/rollup.js:185:14)
at Promise.resolve.then.catch.err (vue-progress-path/node_modules/rollup/dist/rollup.js:9510:6)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.