フォームで数値を入力すると、電球が光るアニメーションのページを作りたい

Question

簡単なフォームで、
電気代、例えば、３０００円と入力すると、
３０００円分のプログレスバーがくるっとまわって光るようなページを作りたいです。
※１００００円が最高値です。その場合、一周します。

まっすぐのプログレスバーなら、CSSでできそうですが、
回るプログレスバーをどうしようか考えています。

どのスクリプト言語を使うべきでしょうか？
このようなものを作った方いらっしゃいましたら教えてください。

Answer 1

形を作るのが大変ですが CSS の transform: rotate() で回転させれるのでアニメーション自体は CSS で出来ます。

• css animation circle progress bar
• CodePen Search

ここら辺を参考にすると良いかと思います。

Comments

[退会済みユーザー]

ありがとうございます！