mac下 ionic3 自定义横向进度条渐变色设置

基于此进度条重复使用频率较高可以简单封装一下

1.在根目录下创建组件

$ ionic g component progress-bar（可以随意起名字）创建成功后，会自动导入到components.module文件，如果自定义的组件需要用到ionic的组件，则需要在此引入IonicModule

2.修改html（根据需求修改）直接上代码

3 scss文件

3.1 3.2

4 接下来ts文件（小白一枚垃圾代码有点多欢迎大佬指正）

4.1 4.2 4.3

5 调用

如果调用的页面不是懒加载页面，则在app.module导入

如果调用的页面是懒加载页面，则在页面对应的xxx.module导入

6.在需要用进度条的页面（html）引入

最终效果图 （会有动画效果）

欢迎大佬指正 小白一枚 一起学习！