Background Refresh

Data updates without blocking the UI.

html

<div class="lod-bgr-stage">
  <div class="lod-bgr-header">
    <strong>Live prices</strong>
    <span class="lod-bgr-spin" style="border-top-color:#A8E6C1;" role="status" aria-live="polite"><span class="lod-bgr-sr">Refreshing&hellip;</span></span>
  </div>
  <div class="lod-bgr-row"><span>BTC</span><span>&pound;41,204</span></div>
  <div class="lod-bgr-row"><span>ETH</span><span>&pound;2,318</span></div>
  <p class="lod-bgr-caption">Updated just now &mdash; the list stays interactive while data updates underneath</p>
</div>
<style>
.lod-bgr-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430; }
.lod-bgr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lod-bgr-spin { width: 14px; height: 14px; border: 2px solid #24143022; border-radius: 999px; display: inline-block; }
.lod-bgr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.lod-bgr-row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #24143014; font-size: 13px; }
.lod-bgr-caption { margin: 10px 0 0; font-size: 12px; color: #241430aa; }
@media (prefers-reduced-motion: no-preference) {
  .lod-bgr-spin { animation: lod-bgr-spin 900ms linear infinite; }
  @keyframes lod-bgr-spin { to { transform: rotate(360deg); } }
}
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]">
  <div class="flex items-center justify-between mb-2">
    <strong>Live prices</strong>
    <span role="status" aria-live="polite" class="tw-bgr-spin w-3.5 h-3.5 border-2 border-[#24143022] rounded-full inline-block" style="border-top-color:#A8E6C1;"><span class="sr-only">Refreshing&hellip;</span></span>
  </div>
  <div class="flex justify-between py-1.5 border-t border-[#24143014] text-sm"><span>BTC</span><span>&pound;41,204</span></div>
  <div class="flex justify-between py-1.5 border-t border-[#24143014] text-sm"><span>ETH</span><span>&pound;2,318</span></div>
  <p class="mt-2.5 text-xs text-[#241430]/70">Updated just now &mdash; the list stays interactive while data updates underneath</p>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
  .tw-bgr-spin { animation: lod-bgr-tw-spin 900ms linear infinite; }
  @keyframes lod-bgr-tw-spin { to { transform: rotate(360deg); } }
}
</style>

react

export function BackgroundRefresh({
  refreshing = true,
  lastUpdated = "Updated just now",
  duration = 900,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
        <strong>Live prices</strong>
        {refreshing && (
          <span role="status" aria-live="polite" className="spin" style={{ width: 14, height: 14, border: "2px solid #24143022", borderTopColor: accent, borderRadius: 999, display: "inline-block" }}>
            <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden" }}>Refreshing&hellip;</span>
          </span>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderTop: "1px solid #24143014", fontSize: 13 }}><span>BTC</span><span>&pound;41,204</span></div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderTop: "1px solid #24143014", fontSize: 13 }}><span>ETH</span><span>&pound;2,318</span></div>
      <p style={{ margin: "10px 0 0", fontSize: 12, color: "#241430aa" }}>{lastUpdated} &mdash; the list stays interactive while data updates underneath</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .spin { animation: lod-bgr-spin ${duration}ms linear infinite; }
          @keyframes lod-bgr-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </div>
  );
}