セットアップチェックリスト

<div class="d11-04-06-card">
          <div class="d11-04-06-head">
            <span>初期セットアップ</span>
            <span class="d11-04-06-pct">0%</span>
          </div>
          <div class="d11-04-06-bar"><span class="d11-04-06-fill"></span></div>
          <ul class="d11-04-06-list">
            <li class="d11-04-06-i"><span class="d11-04-06-check"></span>プロフィールを登録</li>
            <li class="d11-04-06-i"><span class="d11-04-06-check"></span>アイコンをアップロード</li>
            <li class="d11-04-06-i"><span class="d11-04-06-check"></span>最初の記事を作成</li>
            <li class="d11-04-06-i"><span class="d11-04-06-check"></span>通知設定を確認</li>
          </ul>
        </div>

.d11-04-06{background:#eef4fb}
        .d11-04-06 .d11-04-06-card{width:100%;max-width:260px;background:#fff;border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(30,50,80,.1)}
        .d11-04-06 .d11-04-06-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
        .d11-04-06 .d11-04-06-head>span:first-child{font-size:14px;font-weight:700;color:#243b56}
        .d11-04-06 .d11-04-06-pct{font-size:13px;font-weight:700;color:#2a86d8}
        .d11-04-06 .d11-04-06-bar{height:6px;background:#e2eaf3;border-radius:3px;overflow:hidden;margin-bottom:14px}
        .d11-04-06 .d11-04-06-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#4aa3f0,#2a86d8);transition:width .4s}
        .d11-04-06 .d11-04-06-list{list-style:none}
        .d11-04-06 .d11-04-06-i{display:flex;align-items:center;gap:10px;font-size:12px;color:#4c5a6e;padding:7px 0;cursor:pointer;transition:color .2s}
        .d11-04-06 .d11-04-06-check{width:18px;height:18px;border:2px solid #c3d1e2;border-radius:5px;flex-shrink:0;position:relative;transition:background .2s,border-color .2s}
        .d11-04-06 .d11-04-06-check::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s}
        .d11-04-06 .d11-04-06-i.done{color:#9aa7b8;text-decoration:line-through}
        .d11-04-06 .d11-04-06-i.done .d11-04-06-check{background:#2a86d8;border-color:#2a86d8}
        .d11-04-06 .d11-04-06-i.done .d11-04-06-check::after{transform:rotate(45deg) scale(1)}

(function(){
        var root=document.querySelector('#item-11-04-06 .d11-04-06');
        if(!root)return;
        var items=root.querySelectorAll('.d11-04-06-i'),fill=root.querySelector('.d11-04-06-fill'),pct=root.querySelector('.d11-04-06-pct');
        function update(){
          var done=root.querySelectorAll('.d11-04-06-i.done').length,p=Math.round(done/items.length*100);
          fill.style.width=p+'%';pct.textContent=p+'%';
        }
        items.forEach(function(li){li.addEventListener('click',function(){li.classList.toggle('done');update()})});
      })();