LoadingBar

Global progress bar for showing page loading, async requests, file uploads, etc.

Description

LoadingBar creates only one global instance, so calling methods from any position controls the same component. The main use cases are route switching and Ajax requests, where precise progress cannot be obtained—LoadingBar simulates progress. You can also pass an exact progress value via the update() method, which is useful for file uploads. See the API for details.

Usage in Routing

import { LoadingBar } from 'bin-ui-design'

router.beforeEach((to, from, next) => {
  LoadingBar.start()
  next()
})
router.afterEach(() => {
  LoadingBar.done()
})

Basic Usage

Click Start to begin progress, click Done to finish. After calling the start() method, the component automatically simulates progress. When done() or error() is called, the progress is completed and the bar disappears.

After clicking Config, you can review the configuration; the defaults are generally sufficient.

<template>
  <div>
    <b-button @click="start">Start</b-button>
    <b-button @click="update(50)">Update 50</b-button>
    <b-button @click="done">Done</b-button>
    <b-button @click="error">Error</b-button>
    <b-button @click="config">Config</b-button>
    <b-button @click="reset">Reset Config</b-button>
  </div>
</template>

<script setup lang="ts">
import { LoadingBar } from 'bin-ui-design'

function start() {
  LoadingBar.start()
}

function update(val: number) {
  LoadingBar.update(val)
}

function done() {
  LoadingBar.done()
}

function error() {
  LoadingBar.error()
}

function config() {
  LoadingBar.config({
    color: '#5cb85c',
    failedColor: '#f0ad4e',
    height: 5,
    icon: 'loading'
  })
}

function reset() {
  LoadingBar.resetConfig()
}
</script>

API

Use the component by directly calling the following methods:

import { LoadingBar } from 'bin-ui-design'

LoadingBar.start()

LoadingBar.finish()

LoadingBar.error()

LoadingBar.update (Date)(percent)

LoadingBar.config(cfg)

LoadingBar.resetConfig(cfg)

The above methods implicitly create and maintain the Vue component. The function and parameter descriptions are as follows:

Options

Function	Description
color	Default color, primary
duration	Animation duration, default 800
failedColor	Error color, default error
height	Progress bar height, default 2
icon	Set icon to enable right-side loading icon