linear-gradient实现圆形进度条

时间：2023-04-02 16:16:09 HTML

鍓嶈█鏈€杩戦」鐩敤鍒板渾褰㈣繘搴︽潯锛屾墍浠ヤ篃鎵句簡涓€浜涙枃绔犵湅鐪嬫槸鎬庝箞瀹炵幇鐨勩€傚競闈笂鐨勬枃绔犱粙缁嶇殑瀹炵幇鏂瑰紡鍩烘湰閮芥槸涓や釜鐭╁舰鏃嬭浆鍜宑anvas涓ょ鏂瑰紡銆傛劅鍏磋叮鐨勫彲浠ヨ嚜琛屾悳绱€傛湁寰堝鐧惧害鎼滅储馃槀銆備笉杩囨垜鍋氱殑椤圭洰鏄皬绋嬪簭锛坉emo鏄痸ue鐗堢殑锛夛紝canvas绾у埆寰堥珮銆傝櫧鐒跺畼鏂规彁渚涗簡samelayercanvas锛屼絾鏄痵amelayercanvas鍦ㄥ畼鏂圭ぞ鍖哄弽棣堢殑bug寰堝锛屾劅瑙夋瘮杈冮噸锛屾墍浠ヤ笉鑰冭檻銆傛垜涔嬪墠涔熷皾璇曡繃鏃嬭浆涓や釜鐭╁舰鐨勬柟娉曘€傜湡鏈轰笂涓や釜鐭╁舰鐨勪氦鐣屽浼氭湁1px宸﹀彸鐨勭┖闅欙紝涓€鐩存棤娉曚慨澶嶏紝璁捐涓婃垜涔熻涓嶆竻鏄笉鏄彧鏈夎繖鏍枫€傜劧鍚庢棤鎰忎腑鐪嬪埌浜嗚繖鏍蜂竴涓猟emo锛屾劅瑙夋墦寮€浜嗕竴涓柊涓栫晫銆傚師鏉ュ惊鐜繘搴︽潯鍙互杩欐牱瀹炵幇锛侊紒linear-gradient瀹炵幇鐜€傚厛鐪嬬湅鎴戜滑瑕佽揪鍒扮殑鏁堟灉銆備笂鍥惧彲浠ユ媶鎴?涓猟om缁撴瀯銆備篃璁歌繖鏍蜂綘鍙互鐪嬪緱鏇存竻妤氥€傚簳灞傛槸娣辩孩鑹茬殑鍦嗗湀锛屼腑闂寸殑绾㈣壊鍦嗗湀鐢ㄦ潵鐩栦綇搴曢儴鐨勫渾鍦堬紝鍦ㄨ瑙変笂褰㈡垚涓€涓幆銆傜敤涓や釜榛戣壊鐨勫皬鍦嗗湀鏉ュ疄鐜板甫鍦嗗姬鐨勫渾褰㈣繘搴︽潯銆傞鍏堬紝鎴戜滑鍏堝疄鐜板簳閮ㄧ殑娣辩孩鑹插渾鍦?divclass="progress-radial">

.progress-radial{position:relative;瀹藉害锛?20rpx锛涢珮搴︼細120rpx锛涜竟鐣屽崐寰勶細50%锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙90deg锛?C40006%锛?FECC1C锛夛紱锛氭櫘閫氱殑;鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱z-index:1;}閭ｄ箞鎴戜滑灏变細寰楀埌杩欐牱涓€涓渾鍦堝綋鐒惰繖鑲畾涓嶆槸鎴戜滑鎯宠鐨勬晥鏋滐紝鎴戜滑涓嶉渶瑕佽繖绉嶈繃娓℃晥鏋滐紝鎵€浠ュ彲浠ヤ慨鏀筶inear-gradient鑺傜偣锛岃鑺傜偣閲嶅彔褰㈡垚娓呮櫚鐨勮竟鐣岃儗鏅浘鍍忥細linear-gradient(90deg,#C4000650%,#FECC1C50%,#FECC1C);閭ｄ箞鎴戜滑灏卞彲浠ュ緱鍒颁竴涓袱绉嶉鑹蹭竴鍒嗕负浜屼笖娌℃湁杩囨浮鑹茬殑鍦嗗湀鍋囪鎴戜滑鎶婇粍鑹蹭綔涓哄綋鍓嶈繘搴︼紝閭ｄ箞鎴戜滑鍦ㄨ繖涓渾鍦堜笂鍔犱竴涓伄缃╁眰锛屾槸涓嶆槸灏卞彲浠ュ緱鍒颁竴涓繘搴︽潯涓?0%鐨勫渾褰㈣繘搴︽潯锛?divclass="progress-radial">

.progress-radial{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?20rpx锛涢珮搴︼細120rpx锛涜竟鐣屽崐寰勶細50%锛涜儗鏅浘鍍忥細鏉庤繎姊害锛?0搴︼紝#C4000650%锛?FECC1C50%锛?FECC1C锛夛紱琛岄珮锛氭甯革紱鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱z-index:1;}.progress-radial.progress-text{瀹藉害锛?8rpx锛涢珮搴︼細88rpx锛涜儗鏅細#ED1937锛沚order-radius:50%;}涓嶈繃銆?鎴戜滑寰楀埌浜嗚繖涓?0%鐨勫惊鐜繘搴︽潯锛屼絾鏄繘搴︿笉鍙兘涓€鐩存槸50%馃槶锛屾垜浠鏍规嵁瀹為檯鏁版嵁鏉ヨ绠楄繘搴︼紝涔熷氨鏄鎴戜滑瑕佽杩欎釜杩涘害鏉″姩璧锋潵銆傞偅鎴戜滑鎬庝箞璁╄繘搴︽潯鍔ㄨ捣鏉ュ憿锛熷亣璁炬垜浠厛绉诲姩linear-gradient鐨勮搴︼紝浣縜ngle=145deg锛屾垜浠細寰楀埌濡備笅鎯呭喌銆傝繘搴﹁櫧鐒跺湪鍔紝浣嗘槸杩涘害鏉＄殑璧风偣涓嶅湪90deg涓婏紝閭ｄ箞鏈夋病鏈夊姙娉曞疄鐜拌捣鐐瑰湪90deg涓婏紝浣嗘槸杩涘害鏉¤繕鑳藉姩鍛紵绛旀鏄偗瀹氱殑銆傛垜浠妸杩欎釜鍦嗘兂璞℃垚涓婁笅涓ら儴鍒嗐€傚綋杩涘害灏忎簬50%鏃讹紝涓婁笅閮ㄥ垎濡備笅鍥炬墍绀恒€傚鏋滀綘鎶婂浘1鐩栧湪鍥?涓婏紝浣犲彲浠ュ緱鍒颁竴涓畬鏁寸殑绾㈣壊鍦嗗湀銆俻rogress-radial{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?20px锛涢珮搴︼細120px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙90deg锛?C4000650%锛岄€忔槑50%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙90deg锛?FECC1C50%锛?C4000650%锛?C40006锛夛紱琛岄珮锛氭甯革紱鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱z-绱㈠紩锛?锛沵argin:0auto}鐒跺悗鎴戜滑淇敼鍥句腑绗簩閮ㄥ垎linear-gradient鐨勮搴︼紝杈惧埌淇敼杩涘害鐨勬晥鏋溿€備緥濡傦紝鎴戜滑灏濊瘯灏嗚搴︽洿鏀逛负120deg銆傚叾瀹炴垜浠彲浠ユ兂璞★紝灏嗕笂鍥?鏃嬭浆30搴︼紝寰楀埌濡備笅鏁堟灉銆俻rogress-radial{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?20px锛涢珮搴︼細120px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙90deg锛?C4000650%锛岄€忔槑50%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙120deg锛?FECC1C50%锛?C4000650%锛?C40006锛夛紱琛岄珮锛氭甯革紱鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱z-绱㈠紩锛?锛沵argin:0auto}褰撹繘搴﹀ぇ浜?0%鏃讹紝鍥?杞?70deg锛屽緱鍒颁箣鍓嶇殑鍗婂垏鏍峰紡锛屾鏃舵垜浠皢linear-gradient鏇挎崲涓哄ぇ浜?0%鐨勬牱寮忋€傚浘1.progress-radial{position:relative;瀹藉害锛?20px锛涢珮搴︼細120px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙-90deg锛?FECC1C50%锛岄€忔槑50%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙270deg锛?FECC1C50%锛?C4000650%锛?C40006锛夛紱琛岄珮锛氭甯革紱鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱z-绱㈠紩锛?锛沵argin:0auto}鐒跺悗鎴戜滑鍙互淇敼鍥剧墖linear-gradient閮ㄥ垎鐨勮搴︼紝杈惧埌淇敼杩涘害鐨勬晥鏋溿€備緥濡傦紝鎴戜滑灏濊瘯灏嗚搴︽洿鏀逛负-60deg銆傛垜浠彲浠ユ兂璞★紝灏嗕笂鍥炬棆杞?0搴︼紝寰楀埌濡備笅鏁堟灉銆傝繖鏍锋垜浠氨鍙互瀹炵幇涓€涓彲浠ュ疄鐜颁换鎰忕櫨鍒嗘瘮鐨勭幆锛岀劧鍚庢垜浠氨鐩存帴鏍规嵁鏁版嵁缁撳悎涓婇潰涓ょ鎯呭喌瀹屾垚鍔ㄦ€佽绠楄繘搴︾殑鐜?template>