パーツ番号 10-04-05 ・ CSSのみ

営業中インジケータ

「営業中」は緑点滅、「準備中」はグレーで表示するステータス。営業時間の見出し横に置くと分かりやすい。

mapautocss

プレビュー

ソースコード

HTML

<div class="d10-04-05-panel">
          <div class="d10-04-05-row">
            <span class="d10-04-05-dot d10-04-05-open"></span>
            <span class="d10-04-05-txt">営業中</span>
            <span class="d10-04-05-time">11:00 - 22:00</span>
          </div>
          <div class="d10-04-05-row">
            <span class="d10-04-05-dot d10-04-05-close"></span>
            <span class="d10-04-05-txt d10-04-05-muted">準備中</span>
            <span class="d10-04-05-time">〜11:00</span>
          </div>
        </div>

CSS

.d10-04-05-panel{width:100%;max-width:280px;display:flex;flex-direction:column;gap:14px}
        .d10-04-05-row{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f7f9fa;border-radius:10px;font-size:14px}
        .d10-04-05-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
        .d10-04-05-open{background:#2fbf6b;box-shadow:0 0 0 0 rgba(47,191,107,.6);animation:d285pulse 1.6s ease-out infinite}
        .d10-04-05-close{background:#b7c0c7}
        .d10-04-05-txt{font-weight:700;color:#233}
        .d10-04-05-muted{color:#8a949b}
        .d10-04-05-time{margin-left:auto;font-size:12px;color:#667}
        @keyframes d285pulse{0%{box-shadow:0 0 0 0 rgba(47,191,107,.6)}100%{box-shadow:0 0 0 10px rgba(47,191,107,0)}}

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