1.0.1 • Published 1 year ago
vue-progress-bar-loader v1.0.1
vue-progress-bar-loader
This library helps you to quickly show a progress bar loading screen on your Vue application.
Demo
Demo link :- https://jam.dev/c/01172b92-cd75-4df4-8701-0c8a7b2a3741
Installation
npm install vue-progress-bar-loaderUsage
Wrap the ProgressBar component around your loading content within your Vue component's DOM.
<script>
import ProgressBar from '../node_modules/vue-progress-bar-loader/src/components/progress-bar.vue'
</script>
<template>
<main>
<progress-bar />
</main>
</template>Options
Bar Props
| Prop Name | Type | Description |
|---|---|---|
duration | Number | Default : 5000ms duration of animation |
height | String | Default : 7px |
width | String | Default : 60% |
backgroundColor | String | Default : green (You can pass hex values too) |
borderRadius | String | Default : 10px |
loading | Boolean | Default : true |
Text Props
| Prop Name | Type | Description |
|---|---|---|
messages | Array | Default "text1", "text2", "text3", Max - only 3 text |
textSize | String | Default : 30px |
textColor | String | Default : black |
textFontFamily | String | Default : sans-serif |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.