パーツ番号 09-13-07 ・ CSSのみ

ダッシュボードウィジェット用スケルトン

見出し・数値・棒グラフ形状を灰色ブロックで表現したダッシュボードカードのプレースホルダー。管理画面の集計ウィジェット読み込み表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="widget09-13-07">
          <div class="wtitle09-13-07"></div>
          <div class="wvalue09-13-07"></div>
          <div class="wchart09-13-07">
            <span class="bar09-13-07 b1"></span>
            <span class="bar09-13-07 b2"></span>
            <span class="bar09-13-07 b3"></span>
            <span class="bar09-13-07 b4"></span>
            <span class="bar09-13-07 b5"></span>
            <span class="bar09-13-07 b6"></span>
          </div>
        </div>

CSS

.d09-13-07 .widget09-13-07{
          width:100%;
          max-width:260px;
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:12px;
          padding:16px 18px;
          font-family:sans-serif;
        }
        .d09-13-07 .wtitle09-13-07{
          width:90px;
          height:10px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:12px;
        }
        .d09-13-07 .wvalue09-13-07{
          width:130px;
          height:22px;
          border-radius:5px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
          margin-bottom:16px;
        }
        .d09-13-07 .wchart09-13-07{
          display:flex;
          align-items:flex-end;
          gap:7px;
          height:56px;
        }
        .d09-13-07 .bar09-13-07{
          flex:1;
          border-radius:4px 4px 0 0;
          background:linear-gradient(180deg,#cbd5e1,#e2e8f0);
        }
        .d09-13-07 .b1{ height:35%; }
        .d09-13-07 .b2{ height:58%; }
        .d09-13-07 .b3{ height:44%; }
        .d09-13-07 .b4{ height:80%; }
        .d09-13-07 .b5{ height:52%; }
        .d09-13-07 .b6{ height:68%; }

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