パーツ番号 05-07-11 ・ JavaScript使用

ワッフルチャート達成率演出

小さな正方形が並ぶワッフルチャートが達成率の分だけ順番にポップして色付きます。目標管理ダッシュボードやKPI達成率の可視化に使えます。

jsoverlay

プレビュー

ソースコード

HTML

<div class="d05-07-11 io-reveal">
          <div class="d05-07-11-head"><span class="d05-07-11-pct">64%</span><span class="d05-07-11-label">目標達成率</span></div>
          <div class="d05-07-11-grid"></div>
        </div>

CSS

.d05-07-11{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
        .d05-07-11-head{display:flex;align-items:baseline;gap:8px}
        .d05-07-11-pct{font-size:24px;font-weight:800;color:#111827}
        .d05-07-11-label{font-size:11px;color:#6b7280}
        .d05-07-11-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%;max-width:220px}
        .d05-07-11-cell{aspect-ratio:1;border-radius:3px;background:#eef2ff}
        .d05-07-11-cell.is-filled{background:linear-gradient(135deg,#6366f1,#8b5cf6);opacity:0;transform:scale(.4)}
        .d05-07-11.is-in .d05-07-11-cell.is-filled{animation:d05-07-11-pop .35s ease forwards;animation-delay:calc(var(--i) * .02s)}
        @keyframes d05-07-11-pop{to{opacity:1;transform:scale(1)}}

JavaScript

(function(){
          var root = document.getElementById('item-05-07-11');
          if(!root) return;
          var grid = root.querySelector('.d05-07-11-grid');
          var total = 50, filled = 32;
          for(var i=0;i<total;i++){
            var cell = document.createElement('div');
            cell.className = 'd05-07-11-cell' + (i < filled ? ' is-filled' : '');
            cell.style.setProperty('--i', i);
            grid.appendChild(cell);
          }
        })();

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