BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

円形のプログレスバーを生成する html svg

2022-01-28 19:54:39

私のプロジェクトでは、円形のプログレスバーが必要で、リアルタイムの進捗状況を更新する必要がありました。具体的な効果は次のとおりです。

コードはとてもシンプルです。 

<svg width="150px" height="150px" class="svg">
    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin=& quot;round" stroke-linecap="round" fill="none"/>
    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="# 1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" ; stroke-dasharray="471px" />
</svg>

デモのために、css アニメーションコントロールから始めてみましょう。 

svg {
    transform: rotate(-90deg);
}
.progress {
    animation: rotate 1500ms linear both;
}
@keyframes rotate {
    from {
        stroke-dashoffset: 471px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

実装原理

実装は非常に簡単で、svgのstroke-dashoffsetとstroke-dasharrayのプロパティを適用します。

ストロークダッシュアレイ

公式には、ストロークに使用する点線を制御するパターン・パラダイムとして解釈される。すなわち、破線の各セグメントの長さ、すなわち破線の間隔を定義し、数字と数字の間にはカンマまたは空白を入れ、短いストロークとギャップの長さを指定する。奇数の数値が指定された場合、この数値の系列が1回繰り返されるため、偶数の数値となる。

ストロークダッシュオフセット

パス全体のオフセット値を特定する。

破線の間隔とオフセット値を制御することで、様々なラインアニメーションを走らせることができる。もちろん、以下のようにjsで制御することも可能だ。 

let path = document.querySelector('#path');
// You can get the length of the path
let len = path.getTotalLength();
path.style.cssText = `stroke-dasharray:"${number}"`;

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します