# progress-bar-project

**Repository Path**: crazy_about_programming/progress-bar-project

## Basic Information

- **Project Name**: progress-bar-project
- **Description**: 自定义进度条组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-31
- **Last Updated**: 2024-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# pro-progress-bar

## 效果图

![](https://gitee.com/crazy_about_programming/progress-bar-project/raw/master/public/progress-bar.png)

![](https://gitee.com/crazy_about_programming/progress-bar-project/raw/master/public/progress-bar-success.png)

![](https://gitee.com/crazy_about_programming/progress-bar-project/raw/master/public/progress-bar-fail.png)

## Project setup

```
npm install pro-progress-bar
```

### 使用方法

**全局注册**

```js
import ProgressBar from 'pro-progress-bar'

// 进度条配置项
const progressOptions = {
  succColor: '#f12b25',
  failColor: '#E5433E',
  gradient: false, // 线性渐变
  gradientColor: {
    successColor: 'linear-gradient(0deg, #FF6B48 0%, #FF9946 54%, #FFB944 100%)',
    failColor: 'linear-gradient(0deg, #A5A5A5 0%, #C0C0C0 54%, #D8D8D8 100%)'
  },
  stripe: true, // 开启条纹进度条
  stripeColor: {
    successColor: 'repeating-linear-gradient(-45deg, #ff8b46 25%, #ff6c2a 0, #ff6c2a 50%, #ff6c2a 0, #ff8b46 75%, #ff6c2a 0)',
    failColor: 'repeating-linear-gradient(-45deg, #c8c8c8 25%, #b2b2b2 0, #b2b2b2 50%, #b2b2b2 0, #c8c8c8 75%, #b2b2b2 0)'
  },
  transition: {
    widthSpeed: 200,
    opacitySpeed: 400,
    duration: 800 // 定义消失时间 ms
  },
  inverse: true, // 进度条的加载方向
  thickness: 18, // 进度条的高度
  autoFinish: false // 设定动画是否可以自动完成，默认是 true
}
Vue.use(ProgressBar,progressOptions)
```

**局部注册**

```js
<script>
  import ProgressBar from 'pro-progress-bar'
  export default {
      name:'xxx',
      components:{ProgressBar}
  }
</script>
```

**在项目中使用**

```vue
<template>
  <div class="home">
    <button class="md-btn md-theme-primary" type="button" @click="openProgress()">导出成功</button>
    <button  class="md-btn md-theme-error" type="button" @click="openProgressFail()">导出失败</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
    
  },
  methods:{
    openProgress(){
      this.$progress.start({tip:'正在导出中...,请稍后'})
      setTimeout(()=>{
          //模拟ajax请求
        this.$progress.finish('导出成功')
      },1000)
     
    },
    openProgressFail(){
      this.$progress.start({tip:'正在导出中...,请稍后'})
      setTimeout(()=>{
          //模拟ajax请求
        this.$progress.fail('导出失败')
      },1000)
    }
  }
}
</script>
<style>
.md-btn{
  font-size:18px;
  line-height:40px;
  border:none;
  outline:none;
  color:#fff;
  margin-right:20px;
  border-radius:4px;
  cursor:pointer;
}
.md-theme-primary{
  background:blue;
}
.md-theme-error{
  background:red;

}
</style>
```



### 配置项
| 属性 | 说明                                                       | 类型   | 默认值 |
| ---- | ---------------------------------------------------------- | ------ | ------ |
| tip  | 进度条start的提示信息文字                                  | String | 导出中 |
| time | 用来控制进度条加载的快慢，数值越大，加载时长越长，加载越慢 | Number | 100    |