参照サイトのように円型の要素を囲む線をランダムに動かしたいです

Question

参考にしたいサイト

上記サイトのように、円型の要素を線で囲んで、その線をランダムに動かしたいです。

線の色は単色でコーディングする予定なので、動きをどうすべきか教えていただけると幸いです。

<div class=circle>!</div>

.circle{
 color:#000;
 background-color:#fff;
 padding:20px
 border-radius:50%;
}

Answer 1

CSSだけではできません。
SVGと、JavaScriptを使用して実装します。
参考サイトも同様にしております。

また、CSSだけでも、やる方法があるようですね。
CSSアニメーションで円形プログレスバーを作る方法

Comments

[papapudding]

その方法を教えていただけると幸いです！

[miyabi_pudding]

まずは自分で調べて下さい。
出ないと丸投げ質問になってしまうので。

[tanaka1107]

css circle progress bar
css random

[miyabi_pudding]

tanka1107さん >
情報ありがとうございます。
調べて、出てきた記事をもって回答させていただきます。

[papapudding]

御二方ともありがとうございます！
独学でここまで来たので調べても調べても答えにたどり着かず……プログレスバーというのですね！！