基于Vue实现一个中规中矩loading组件-创新互联
前言
10年专注成都网站制作,成都定制网站,个人网站制作服务,为大家分享网站制作知识、方案,网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网站,高端网页制作,对宣传片制作等多个领域,拥有丰富的网站维护经验。最近有一个新的项目,UI大佬不知道从哪里找来了一张GIF丢到蓝湖,说作为全局的页面loading ,但是自己想了想,还是选择画一个。
一开始想过用svg,canvas;最终还是选择了css3+js来实现这个效果;
gif的缺点挺多,至于为什么又排除了svg和canvas;
是因为css3+js可控性更强,不管是大小还是颜色,还是响应式(我的项目走的vh,vw)那套来适配;
可以借助打包插件,达到loading的大小适配;
效果
UI大佬提供的GIF
实现的效果【在线codesandbox预览】
- 支持环的颜色改变及整个展示大小
- 支持在loading底部显示文字并控制其样式
实现思路
这个东东主要用了这么几个要点来实现完整的效果;
- flex和position来布局
- 伪类的颜色继承(currentColor)
- 边框结合圆角实现环
- 用了transform和animation来实现了整个过渡
效果知道怎么实现了,剩下的就是我们需要实现的功能点了;
因为是面向移动端的,所以这些常规的东东也要考虑下
- 遮罩层可控
- 防止点击穿透滚动body
- 组件支持函数方法调用
源码
Loading.vue
{{ text }}
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:基于Vue实现一个中规中矩loading组件-创新互联
当前网址:http://pwwzsj.com/article/ejsoh.html