パーツ番号 09-11-08 ・ CSSのみ

プログレスドット型評価(5段階ドット)

丸ドットの塗り具合で評価段階を示す表示。星を使わずシンプルにレベル感を伝えたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="dots" aria-label="5段階中4">
          <i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i>
        </div>

CSS

.d09-11-08 .dots{ display:flex; gap:10px; }
        .d09-11-08 .dots i{ width:16px; height:16px; border-radius:50%; background:#e2e5ea; display:block; }
        .d09-11-08 .dots i.on{ background:#4a6cf7; }

クラス名 .d09-11-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。