前言

10年專注成都網(wǎng)站制作，成都定制網(wǎng)站，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對宣傳片制作等多個(gè)領(lǐng)域，擁有豐富的網(wǎng)站維護(hù)經(jīng)驗(yàn)。

最近有一個(gè)新的項(xiàng)目，UI大佬不知道從哪里找來了一張GIF丟到藍(lán)湖，說作為全局的頁面loading ，但是自己想了想，還是選擇畫一個(gè)。

一開始想過用svg,canvas;最終還是選擇了css3+js來實(shí)現(xiàn)這個(gè)效果；

gif的缺點(diǎn)挺多,至于為什么又排除了svg和canvas；

是因?yàn)閏ss3+js可控性更強(qiáng)，不管是大小還是顏色，還是響應(yīng)式(我的項(xiàng)目走的vh,vw)那套來適配；

可以借助打包插件，達(dá)到loading的大小適配;

效果

UI大佬提供的GIF

實(shí)現(xiàn)的效果【在線codesandbox預(yù)覽】

• 支持環(huán)的顏色改變及整個(gè)展示大小
• 支持在loading底部顯示文字并控制其樣式
  

實(shí)現(xiàn)思路

這個(gè)東東主要用了這么幾個(gè)要點(diǎn)來實(shí)現(xiàn)完整的效果；

• flex和position來布局
• 偽類的顏色繼承(currentColor)
• 邊框結(jié)合圓角實(shí)現(xiàn)環(huán)
• 用了transform和animation來實(shí)現(xiàn)了整個(gè)過渡

效果知道怎么實(shí)現(xiàn)了，剩下的就是我們需要實(shí)現(xiàn)的功能點(diǎn)了；

因?yàn)槭敲嫦蛞苿?dòng)端的,所以這些常規(guī)的東東也要考慮下

• 遮罩層可控
• 防止點(diǎn)擊穿透滾動(dòng)body
• 組件支持函數(shù)方法調(diào)用

源碼

Loading.vue

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：基于Vue實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://weahome.cn/article/ejsoh.html