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-loader

Usage

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.

• 🚀 niteshsingh29