微创新的进度插件 SQProgress，我的第一个前端插件

[geektony]

SQProgress inspired by NProgress.js, Pace.js and ToProgress.js

把进度条扩展到浏览器 top, right, bottom, left 的方形进度插件。

• 利用 CSS Transition 特性实现
• 没有其他 Library 依赖、轻量，体积 ~3KB

独白

1. 虽然没有什么技术难度，但觉得能把创意实现出来，贡献社区的感觉很好
2. 社区让技术变得开放和平等
3. 从一个 iOS 开发者到 Web 开发者的转身，对技术的热诚越发浓烈
4. 感谢在技术路上的朋友的支持和建议
5. 希望多与各位同行交流，不仅是技术，更多的是想法

参考

[murmur]

这个设计很烦啊。。你围着浏览器快速转圈我的视觉感官就是浏览器有一个红框闪了一下，我看的莫名其妙，直到后来看到你是 round browser 。。。
不实用。。太影响观感 别人的进度条就一个横条没见有转圈的
另外楼主可以想想，以前的按钮是怎么做的，是不是 2 条线深色 2 条浅色就是立体效果，你这个红线一样的，会给人误读

[geektony]

@murmur 实用性的确不大，也是做来练练手，在实现上参考了 NProgress 而已。在移动端可能效果好玩一点？另外，你最后那个意思是让它更立体，可以提高解读？

[murmur]

@geektony 我的意思是你红框圈屏幕给人误读 就老实放一个横条不要拐弯 框表示框选 比如录像的时候某个窗口会有红框闪

[Smilecc]

这个页面配色不仔细看都看不到上面的进度条。。。