psk-loadingbar
Vue component with animated horizontal bar.
Ideal to be displayed while a process is waiting to be completed, such as the response to an http request.
- Report bugs: https://github.com/pauloklaus/psk-loadingbar/issues
- Live test: https://pauloklaus.com.br/playground
Install
Create a new vue project:
vue create
Install component:
npm install --save psk-loadingbar
Environment setting
Make a src/resources folder at the root:
mkdir src/resources
Configure the psk-loadingbar
Create the src/resources/psk-loadingbar.js:
import Vue from "vue";
import LoadingBar from "psk-loadingbar";
import "psk-loadingbar/dist/LoadingBar.css";
Vue.use(LoadingBar, { LoadingBarName: "MyLoadingBar" });
Import psk-loadingbar and dependencies
The "src/main.js" file should look like this:
import Vue from "vue";
import App from "./App.vue";
import "./resources/psk-loadingbar";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount("#app");
How to use (example in App.vue)
<template>
<div>
<my-loading-bar :animate="true" :fgClass="my-color" />
</div>
</template>
<style>
.my-color {
background-color: red;
}
</style>
Properties
Property | Description | Required | Default |
---|---|---|---|
animate | Start animation | no | yes |
resetOnStop | Clear the bar status when the animation stops | no | yes |
bgClass | Background CSS class | no | - |
fgClass | Foreground CSS class | no | - |
Using in the browser
To use directly in the browser, import psk-loadingbar:
<script src="https://unpkg.com/psk-loadingbar" />