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）引入

 

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

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