@litt1e-p/progress-bar

a progress component with animation effect for vue

Usage no npm install needed!

<script type="module">
  import litt1ePProgressBar from 'https://cdn.skypack.dev/@litt1e-p/progress-bar';
</script>

README

Introduce

a progress component with count up animation effect for vue

vue 3.x supports

Installation

npm i @litt1e-p/progress-bar --save

Usage

  1. global component via Vue.use()
// in main.js
import ProgressBar from '@litt1e-p/progress-bar'
import '@litt1e-p/progress-bar/dist/progressBar.css'
// or 
@import '@litt1e-p/progress-bar/dist/progressBar.css'

<progress-bar :percent="your value"></progress-bar>
  1. normal component in any vue component
// in any vue component file
import { ProgressBar } from '@litt1e-p/progress-bar'
import '@litt1e-p/progress-bar/dist/progressBar.css'
// or 
@import '@litt1e-p/progress-bar/dist/progressBar.css'

<progress-bar :percent="your value"></progress-bar>
  1. custom tintColor & bgColor
<progress-bar :percent="your value" tintColor="#f0ff0f" bgColor="gray"></progress-bar>

Screenshots