cycle環形進度條實現

2021-09-25 12:05:49 字數 714 閱讀 9133

我們一般在開發過程中使用條形進度條比較多,環形進度條很少用到,

如何實現以下效果的進度條呢?

在這裡,我利用了兩個同心圓來實現此效果,乙個置於底層乙個置於上層來進行進度條的實現,廢話少說,直接上**。

html:

10點

css:

.circle-bar 

.circle-bar-left,

.circle-bar-right

/*這裡採用clip剪下了圓,實現左右兩個半圓,右半圓在後面,因此在更上一層,

clip的用法參考:

*/.circle-bar-right

.circle-bar-left

.introduction textarea

.mask

.mask :first-child

/*所有的後代都水平垂直居中,這樣就是同心圓了*/

.circle-bar *

/*自身以及子元素都是圓*/

.circle-bar,

.circle-bar>*

js:

以上就是實現該效果的全部**

環形進度條

在專案中做廣告頁,需要乙個5s倒計時的進度條。就用了calayer寫了乙個簡單的進度條。直接上 import inte ce circularprogressview uiview void start void stop import circularprogressview.h import i...

環形進度條

先上效果圖 不多。直接貼 html 0 css body box rotate left right center popu left before left after input radius bg radius dot radius dot before radius dot before s...

環形進度條

先上效果圖 設定進度 param progress public void setprogress int progress 得到 circularprogressbar 物件,用來設定其他的一些屬性 return public circularprogressbar getcircularprog...