更新记录

0.0.2（2021-08-06）

1. 增加示例代码

0.0.1（2021-08-06）

1. 集成纯CSS进度条，调整了布局基于em相对单位，并增加了test类型
2. 集成了一款强大的进度条组件，并对内置显示百分比进行了修复

平台兼容性

wxy-progress

组件来源

对插件市场下载量比较高或自己比较喜欢的进度条进行了集成，在此先感觉这些优秀的作者:

1. 纯css动态进度条(已完成集成)
2. 一款强大的进度条组件(已完成集成)
3. 圆形进度条
4. vus-sphere-progress 球形进度条
5. cmd-progress进度条组件
6. 文件上传球形进度/百分比进度条插件
7. Loading可以运用到上传下载中的进度条显示状态
8. 一款带波浪的圆环进度条

集成的特点

1. 布局采用相对单位em和百分比，尤其是纯CSS进度条，对样式和效果进行了优化，并增加了test的类型
2. 转为uni-modules组件，集成和二次开发更方便
3. 对集成进行H5、APP和小程序三个平台进行测试，保留跨端的组件

属性

mode {String} 目前可选css和progress，默认是css 至于集成组件属性可参考上面集成的

示例代码

CSS进度条

<template>
<view>
<wxy-progress mode="css" :Width="width" Type="aqua"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="copper"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="candy"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="neon"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="shine"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="zigzag"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="diamond"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="hearts"></wxy-progress>
<wxy-progress mode="css" :Width="width" Type="test"></wxy-progress> 
</view>
<template>
<script>
export default {
    data() {
        return {
            width:'70'
        };
    },
    methods: {}
};
</script>

另一款进度条

<template>
<view>
<wxy-progress mode="progress" :percentage="width" ></wxy-progress>
<wxy-progress mode="progress" :percentage="width" strokeWidth="20" textInside></wxy-progress>
</view>
<template>
<script>
export default {
    data() {
        return {
            width:'70'
        };
    },
    methods: {}
};
</script>