Refreshing

Existing data is being refreshed.

html

<div class="lod-ref-stage" data-style="spinner">
  
  <div class="lod-ref-spin" style="border-top-color:#BFD9F2;"></div>
  <div class="lod-ref-bar"><span style="background:#BFD9F2;"></span></div>
  
  <p role="status" aria-live="polite" class="lod-ref-caption">Refreshing existing data&hellip;</p>
</div>
<style>
.lod-ref-stage { width: 100%; max-width: 320px; padding: 20px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }
.lod-ref-spin, .lod-ref-bar { display: none; }
[data-style="spinner"] .lod-ref-spin { display: inline-block; width: 26px; height: 26px; border: 3px solid #24143022; border-radius: 999px; }
[data-style="bar"] .lod-ref-bar { display: block; height: 6px; background: #24143014; border-radius: 999px; overflow: hidden; }
.lod-ref-bar span { display: block; height: 100%; width: 40%; border-radius: 999px; }
.lod-ref-caption { margin: 10px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-style="spinner"] .lod-ref-spin { animation: lod-ref-spin 900ms linear infinite; }
  [data-style="bar"] .lod-ref-bar span { animation: lod-ref-slide 900ms ease-in-out infinite; }
  @keyframes lod-ref-spin { to { transform: rotate(360deg); } }
  @keyframes lod-ref-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
}
</style>

tailwind

<div class="w-full max-w-[320px] p-5 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center" data-style="spinner">
  
  <div class="tw-ref-spin hidden w-[26px] h-[26px] border-[3px] border-[#24143022] rounded-full mx-auto" style="border-top-color:#BFD9F2;"></div>
  <div class="tw-ref-bar hidden h-1.5 bg-[#24143014] rounded-full overflow-hidden"><span class="block h-full w-2/5 rounded-full" style="background:#BFD9F2;"></span></div>
  
  <p role="status" aria-live="polite" class="mt-2.5">Refreshing existing data&hellip;</p>
</div>
<style>
[data-style="spinner"] .tw-ref-spin { display: inline-block; }
[data-style="bar"] .tw-ref-bar { display: block; }
@media (prefers-reduced-motion: no-preference) {
  [data-style="spinner"] .tw-ref-spin { animation: lod-ref-tw-spin 900ms linear infinite; }
  [data-style="bar"] .tw-ref-bar span { animation: lod-ref-tw-slide 900ms ease-in-out infinite; }
  @keyframes lod-ref-tw-spin { to { transform: rotate(360deg); } }
  @keyframes lod-ref-tw-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
}
</style>

react

export function Refreshing({
  isRefreshing = true,
  style = "spinner",
  duration = 900,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 20, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa", textAlign: "center" }}>
      {isRefreshing && style === "spinner" && (
        <div className="spin" style={{ display: "inline-block", width: 26, height: 26, border: "3px solid #24143022", borderTopColor: accent, borderRadius: 999 }} />
      )}
      {isRefreshing && style === "bar" && (
        <div style={{ height: 6, background: "#24143014", borderRadius: 999, overflow: "hidden" }}>
          <span className="bar" style={{ display: "block", height: "100%", width: "40%", borderRadius: 999, background: accent }} />
        </div>
      )}
      <p role="status" aria-live="polite" style={{ margin: "10px 0 0" }}>{isRefreshing ? "Refreshing existing data\u2026" : "Up to date"}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .spin { animation: lod-ref-spin ${duration}ms linear infinite; }
          .bar { animation: lod-ref-slide ${duration}ms ease-in-out infinite; }
          @keyframes lod-ref-spin { to { transform: rotate(360deg); } }
          @keyframes lod-ref-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
        }
      `}</style>
    </div>
  );
}