로열티 프로그램

<div class="loyal"><div class="tier" id="tier">BASE</div><div class="score"><b id="points">0</b><span>/ 100 POINTS</span></div><div class="meter"><i id="fill"></i></div><small>+20 PER PURCHASE</small></div>

.loyal{width:min(86%,480px);text-align:center;font:900 clamp(10px,max(1.7vmin,1vw),15px)/1.1 sans-serif}.tier{width:clamp(62px,16vmin,122px);height:clamp(62px,16vmin,122px);display:grid;place-items:center;margin:auto;border:4px solid var(--accent);border-radius:50%;color:var(--accent);font-size:clamp(11px,max(2.5vmin,1vw),22px);transition:.5s}.tier.gold{background:var(--accent-2);border-color:var(--accent-2);color:#19120d}.score{margin:clamp(10px,2.5vmin,20px)}.score b{font-size:clamp(28px,7vmin,55px)}.score span{color:var(--muted)}.meter{height:clamp(8px,2vmin,16px);background:var(--line)}.meter i{display:block;height:100%;background:var(--accent);transition:width .6s}.loyal small{display:block;margin-top:8px;color:var(--muted)}small{font-size:max(.833em,10px,1vw)}

let points=0;function show(){document.querySelector('#points').textContent=points;document.querySelector('#fill').style.width=points+'%';document.querySelector('#tier').textContent=points>=100?'PLUS':'BASE';document.querySelector('#tier').classList.toggle('gold',points>=100);points=points>=100?0:points+20}show();setInterval(show,1000);