首頁 > web前端 > css教學 > 主體

如何使用 SVG 建立圓形百分比進度條?

Patricia Arquette
發布: 2024-11-07 15:37:03
原創
728 人瀏覽過

How to Create a Circular Percentage Progress Bar Using SVG?

建立圓形百分比進度條

該請求是一個在圓圈內顯示百分比的徑向進度指示器。為了實現這一點,存在基於圖像和基於 CSS 的方法。

基於影像的方法

可以使用黃色圓圈影像。但是,如果目的是建立動態進度條,CSS 提供了更合適的解決方案。

使用 SVG 的基於 CSS 的方法

SVG 是一種多功能工具創建複雜的形狀,包括圓形形狀。以下是基於SVG 的創建進度條的方法:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text>
登入後複製

筆劃破折號數組是動畫的,並且使用jQuery 更新百分比:

var count = $('#count');
$({Counter: 0}).animate({Counter: count.text()}, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});
登入後複製

DEMO

[徑向進度條](https://i.sstatic.net/cK5lv.jpg)

這種方法提供了一個動態且時尚的進度指示器,可以輕鬆自訂和整合進入網頁設計。

以上是如何使用 SVG 建立圓形百分比進度條?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板