おしゃれに作られたグラフ、プログレスバー4選!


Skillの可視化、経過時間、どのくらい行ったかそんな使いたいものが、グラフやプログレスバーです。ここでは、Codepenのサイトで書かれたグラフ、プログレスバーの中でも厳選してカッコ良いものをご紹介します。

1.Stats animation.

表示されたタイミングでグラフが描かれます!

See the Pen Stats animation. by Jonas Badalic (@JonasBadalic) on CodePen.

2.UI Statistic Pop Out CSS

See the Pen UI Statistic Pop Out CSS by Jamie Coulter (@jcoulterdesign) on CodePen.

3.Pure CSS Progress

おしゃれな色で種類も豊富ですね。コピペで動きます!

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

4.Pure CSS Bars

CSSのみで色々なグラフ、プログレスバーを表現できます!コピペで動くので試して見ては!

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

5.Progress with CSS variables

See the Pen Progress with CSS variables by Stas Melnikov (@melnik909) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です