摘要:簡介實際開發(fā)中,文件的圖片的加載等情形下經(jīng)常需要展示進度情況。最簡單的直接顯示百分之多少即可,然后一般情況下就是條形進度條,設(shè)置長度表示已完成進度。這里介紹一下稍微復(fù)雜的圓形進度條如何實現(xiàn)。
實際開發(fā)中,文件的download、upload、圖片的加載等情形下經(jīng)常需要展示進度情況。 最簡單的直接顯示百分之多少即可,然后一般情況下就是條形進度條,設(shè)置長度表示已完成進度。這里介紹一下稍微復(fù)雜的圓形進度條如何實現(xiàn)。
transform 旋轉(zhuǎn) (這里只需要用到2d )
clip 裁剪 設(shè)置元素的一部分可視
整體的圓是分成兩個半圓來實現(xiàn)的,為什么呢?因為要。。。每個圓遮住一半,不然完整的圓滾來滾去跟沒滾一樣。
下面只說明半圓的實現(xiàn)方式,最后拼在一起即可,以右半邊為例一步步說明:
設(shè)圓整體區(qū)域 200px * 200px
遮住左邊的100*200
{ clip: rect(0,200px,auto,100px) //不明白的先看相關(guān)資料 }
然后旋轉(zhuǎn)一定的角度
{ transform: rotate(40px) //不明白語法的先找下資料 }
看上圖發(fā)現(xiàn),我們只要求半圓的實現(xiàn),但上圖已經(jīng)超出右邊半圓到左邊區(qū)域了,到時候會覆蓋左邊,所以我們要把超出去的部分遮住,于是給右邊半圓設(shè)置父容器,它的大小形狀跟上面的半圓一樣,只是它不旋轉(zhuǎn),這樣就能遮住超出去的旋轉(zhuǎn)半圓了。(這里我們給父容器加上底色)加上父容器后,效果如下。至此完成右邊半圓的設(shè)置,在加上左邊半圓,就搞定了。
具體使用時,當(dāng)進度<= 50%,只有右邊旋轉(zhuǎn),左邊保持不動;>50%的時候,右邊旋轉(zhuǎn)180度,左邊也旋轉(zhuǎn)一定度數(shù)
旋轉(zhuǎn)的進度條,除了用在圓上,矩形上也可以。一樣的道理,只是把旋轉(zhuǎn)的區(qū)域增大,然后用矩形來截取即可。
圓形進度條
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111595.html
摘要:需求概要小程序中使用圓形倒計時,效果圖思路使用個一個是背景圓環(huán),一個是彩色圓環(huán)。 需求概要 小程序中使用圓形倒計時,效果圖:showImg(https://segmentfault.com/img/bV3Bko?w=265&h=267); 思路 使用2個canvas 一個是背景圓環(huán),一個是彩色圓環(huán)。 使用setInterval 讓彩色圓環(huán)逐步繪制。 解決方案 第一步先寫結(jié)構(gòu) 一個盒...
摘要:引子移動端做一個加載的圖標(biāo),跟以往沿用的都不太一樣,是一個圓環(huán)進度條,圓環(huán)進度條也就罷了,還得能用百分比控制。 引子 移動端做一個 loadiing 加載的圖標(biāo),跟以往沿用的都不太一樣,是一個圓環(huán)進度條,圓環(huán)進度條也就罷了,還得能用百分比控制。 CSS3 實現(xiàn)圓環(huán) demo 剛開始寫這個圓環(huán)的時候是參照帖子上給出的css代碼代入,然后根據(jù)自己的需求改,發(fā)現(xiàn)圓環(huán)可以完美轉(zhuǎn)動了,但是好像沒...
摘要:引子移動端做一個加載的圖標(biāo),跟以往沿用的都不太一樣,是一個圓環(huán)進度條,圓環(huán)進度條也就罷了,還得能用百分比控制。 引子 移動端做一個 loadiing 加載的圖標(biāo),跟以往沿用的都不太一樣,是一個圓環(huán)進度條,圓環(huán)進度條也就罷了,還得能用百分比控制。 CSS3 實現(xiàn)圓環(huán) demo 剛開始寫這個圓環(huán)的時候是參照帖子上給出的css代碼代入,然后根據(jù)自己的需求改,發(fā)現(xiàn)圓環(huán)可以完美轉(zhuǎn)動了,但是好像沒...
閱讀 2609·2021-11-22 15:25
閱讀 1429·2021-11-15 17:59
閱讀 1129·2021-09-29 09:34
閱讀 1535·2021-09-26 09:46
閱讀 3030·2021-09-02 15:40
閱讀 1190·2019-08-30 15:56
閱讀 3282·2019-08-30 15:55
閱讀 693·2019-08-29 17:08