パーツ番号 05-04-04 ・ CSSのみ
横棒グラフアニメ
複数項目の横棒が表示時に左から伸び、値ラベルが末尾に付きます。WordPressのアンケート結果や評価指標の可視化に便利です。
プレビュー
ソースコード
HTML
<div class="d05-04-04-chart">
<div class="d05-04-04-item"><span class="d05-04-04-lbl">認知度</span><div class="d05-04-04-track"><div class="d05-04-04-bar" style="--d05-04-04-w:82%"><i>82</i></div></div></div>
<div class="d05-04-04-item"><span class="d05-04-04-lbl">信頼性</span><div class="d05-04-04-track"><div class="d05-04-04-bar" style="--d05-04-04-w:91%"><i>91</i></div></div></div>
<div class="d05-04-04-item"><span class="d05-04-04-lbl">使いやすさ</span><div class="d05-04-04-track"><div class="d05-04-04-bar" style="--d05-04-04-w:74%"><i>74</i></div></div></div>
<div class="d05-04-04-item"><span class="d05-04-04-lbl">サポート</span><div class="d05-04-04-track"><div class="d05-04-04-bar" style="--d05-04-04-w:88%"><i>88</i></div></div></div>
</div>CSS
.d05-04-04 .d05-04-04-chart{width:100%;display:flex;flex-direction:column;gap:14px}
.d05-04-04 .d05-04-04-item{display:flex;align-items:center;gap:10px}
.d05-04-04 .d05-04-04-lbl{width:76px;font-size:12px;color:#5a6273;text-align:right;flex:0 0 auto}
.d05-04-04 .d05-04-04-track{flex:1;height:22px;background:#eef1f7;border-radius:11px;overflow:hidden}
.d05-04-04 .d05-04-04-bar{height:100%;width:0;border-radius:11px;
background:linear-gradient(90deg,#2b5cff,#5a86ff);display:flex;align-items:center;justify-content:flex-end;
transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.d05-04-04.is-in .d05-04-04-bar{width:var(--d05-04-04-w)}
.d05-04-04 .d05-04-04-bar i{font-style:normal;color:#fff;font-size:11px;font-weight:700;padding-right:8px}
.d05-04-04.is-in .d05-04-04-item:nth-child(2) .d05-04-04-bar{transition-delay:.12s}
.d05-04-04.is-in .d05-04-04-item:nth-child(3) .d05-04-04-bar{transition-delay:.24s}
.d05-04-04.is-in .d05-04-04-item:nth-child(4) .d05-04-04-bar{transition-delay:.36s}クラス名 .d05-04-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。