분산 추적

<div class="demo"><div class="head"><b>TRACE 7f3a</b><span id="duration">0 ms</span></div><div class="timeline"><div class="row"><span>gateway</span><div class="rail"><i id="gateway"></i></div></div><div class="row"><span>api</span><div class="rail"><i id="api"></i></div></div><div class="row"><span>database</span><div class="rail"><i id="database"></i></div></div><div class="ruler"><span>0</span><span>50</span><span>100 ms</span></div></div><div class="foot"><span id="focus">gateway span</span><span>tap to step</span></div></div>

.demo{width:min(94vw,690px);height:min(86vh,310px);padding:clamp(10px,2.4vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(9px,2.5vmin,15px)/1.3 ui-monospace,monospace}.head,.foot{display:flex;justify-content:space-between;gap:8px}.head b{color:var(--accent)}.head span,.foot{color:var(--muted)}.foot{font-size:.82em}.timeline{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,2.5vmin,20px)}.row{display:flex;align-items:center;gap:10px}.row>span{width:25%;color:var(--muted)}.rail{height:clamp(12px,4.5vmin,25px);flex:1;background:var(--bg);border:1px solid var(--line);border-radius:5px;position:relative;overflow:hidden}.rail i{position:absolute;top:0;bottom:0;width:0;background:var(--accent);border-radius:4px;transition:width .3s}.row:nth-child(2) i{left:15%;background:var(--accent-2)}.row:nth-child(3) i{left:38%;background:var(--accent-3)}.ruler{display:flex;justify-content:space-between;margin-left:calc(25% + 10px);color:var(--muted);font-size:.8em}

const spans=[['gateway',94],['api',68],['database',31]],labels=['gateway span','api span','database span'];let step=0;function draw(){spans.forEach(([id,width],i)=>{document.getElementById(id).style.width=i<=step?width+'%':'0%'});document.getElementById('focus').textContent=labels[step];document.getElementById('duration').textContent='span: '+spans[step][1]+' ms';step=(step+1)%3}draw();const timer=setInterval(draw,650);document.querySelector('.demo').addEventListener('pointerdown',()=>{clearInterval(timer);draw()})