更新记录
1.0.11(2020-01-12) 下载此版本
修改图片示例显示情况
1.0.1(2020-01-12) 下载此版本
新增球形波浪进度条,GIF图播放有点卡顿,请下载项目运行查看。
1.0.0(2020-01-04) 下载此版本
一个简单的进度条样式,目前支持线形以及圆形进度条。
查看更多平台兼容性
Loading说明
简单的一个进度条展示组件。
目前主要包含线形和圆环进度条加载样式,可供学习。
使用组件
引入组件
<load-line loadType="line" :loadText="loadText" :lineInfo="lineInfo" :loadPercent="loadPercent"></load-line>
<load-line loadType="circle" :circleInfo="circleInfo" :loadPercent="loadPercent"></load-line>
<load-line loadType="ball" :ballInfo="ballInfo" :loadPercent="loadPercent"></load-line>
import LoadLine from '../../components/load-line/load-line.vue'
export default {
components:{
LoadLine,
}
}
线形进度条参数说明
参数 | 默认 | 是否必选 | 说明 |
---|---|---|---|
loadType | line | × | String类型,传‘line’为线形进度条 |
lineInfo | {colorChange:false,loadColor:'#6ee2e1,#2ba98c,#a07e1e'} | × | 线形进度条样式参数,colorChange为颜色是否渐变,loadColor进度条颜色,渐变则需要至少三个色值,用“,”隔开,否则一个色值 |
loadText | 加载中: | × | 进度条显示的文字 |
loadPercent | 0 | √ | 进度条百分比 |
圆环形进度条参数说明
参数 | 默认 | 是否必选 | 说明 |
---|---|---|---|
loadType | line | × | String类型,传‘circle’为圆环形进度条 |
circleInfo | {foreground:#FFFFFF,background:'#6ED4BF',circleColor:'#cec4c4'} | × | 圆环形进度条样式参数,foreground前景色,background背景色,circleColor中心环的颜色 |
loadText | 加载中: | × | 进度条显示的文字 |
loadPercent | 0 | √ | 进度条百分比 |
球形进度条参数说明
参数 | 默认 | 是否必选 | 说明 |
---|---|---|---|
loadType | line | × | String类型,传‘ball’为球形形进度条 |
ballInfo | {ballType:‘all’,ballSize:150,waveColor:'#FFFFFF',ballPadding:'5px'} | × | 球形进度条样式参数,ballType球形进度条类别:center-只中心出现水波,all-球面也出现水波;ballSize球体大小;waveColor波浪颜色;ballPadding球内间距 |
loadText | 加载中: | × | 进度条显示的文字 |
loadPercent | 0 | √ | 进度条百分比 |
目录结构
├── components //组件
│ └── load-line //Loading组件
│ │ └── css //css
│ │ │ ├── font-awesome.min.css //图标样式
│ │ │ └── loadline.css //基础组件样式
│ │ └── load-line.vue //Loading组件
│ │ │
├── pages //页面文件夹
│ └── load
│ │ └── load.vue //功能页