SVG と JavaScript を使用して円形のパーセント進行状況バーを作成する方法-CSSチュートリアル-php.cn

SVG と JavaScript を使用して円形のパーセント進行状況バーを作成する方法

Linda Hamilton

リリース： 2024-11-15 13:11:02

オリジナル

686 人が閲覧しました

How to Create a Circular Percent Progress Bar with SVG and JavaScript?

円形のパーセント進行状況バーの作成

モックアップにあるような円形のパーセント進行状況バーを作成するには、次の理由から 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">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text>

ログイン後にコピー

CSS:

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 25%;
}

ログイン後にコピー

JavaScript (オプション):

アニメーション化するには進行状況を確認し、パーセンテージを増分するには、次の jQuery を使用します。コード:

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

ログイン後にコピー

結果:

SVG コードは、黄色の背景と白色の進行状況インジケーターを持つ円形の進行状況バーを作成します。 JavaScript アニメーションは、進行状況バーの中央に表示されるパーセンテージを 5 秒かけて 0 から 100% まで増加させます。

以上がSVG と JavaScript を使用して円形のパーセント進行状況バーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。