Loading

{#if layout === "list"} {#each listRows as row (row)}

{/each} {:else if layout === "profile"}

{:else}

{/if}

20:Tc4d5,

<script lang="ts">
  let { layout = "card", pulse = true }: { layout?: "card" | "list" | "profile"; pulse?: boolean } = $props();

  const listRows = Array.from({ length: 4 }, (_, i) => i);
</script>

<div class="clc" role="status" aria-label="Loading content">
  <div class="clc-tag">
    <span class="clc-dot" class:clc-pulse={pulse} aria-hidden="true"></span>
    Loading
  </div>
  <div class="clc-body" class:clc-pulse={pulse}>
    {#if layout === "list"}
      {#each listRows as row (row)}
        <div class="clc-row">
          <div class="clc-block clc-thumb"></div>
          <div class="clc-lines">
            <div class="clc-block clc-line" style="width: 50%"></div>
            <div class="clc-block clc-line" style="width: 75%"></div>
          </div>
        </div>
      {/each}
    {:else if layout === "profile"}
      <div class="clc-row clc-profile">
        <div class="clc-circle clc-avatar-lg"></div>
        <div class="clc-lines">
          <div class="clc-block clc-line" style="width: 33%; height: 0.875rem"></div>
          <div class="clc-block clc-line" style="width: 50%"></div>
        </div>
      </div>
    {:else}
      <div class="clc-image"></div>
      <div class="clc-row">
        <div class="clc-circle clc-avatar"></div>
        <div class="clc-lines">
          <div class="clc-block clc-line" style="width: 40%"></div>
          <div class="clc-block clc-line" style="width: 80%"></div>
        </div>
      </div>
    {/if}
  </div>
</div>

<style>
  .clc {
    width: 100%;
    max-width: 24rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    background: color-mix(in srgb, currentColor 3%, transparent);
    padding: 1.25rem;
    color: #fff;
    font-family: system-ui, sans-serif;
  }
  @media (prefers-color-scheme: light) {
    .clc {
      color: #0f172a;
    }
  }
  .clc-tag {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, currentColor 50%, transparent);
  }
  .clc-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #f5c542;
  }
  .clc-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .clc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .clc-profile {
    padding: 1.5rem 0;
  }
  .clc-lines {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0.5rem;
  }
  .clc-block,
  .clc-circle {
    background: color-mix(in srgb, currentColor 10%, transparent);
    flex-shrink: 0;
  }
  .clc-block {
    border-radius: 0.5rem;
  }
  .clc-circle {
    border-radius: 9999px;
  }
  .clc-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 0.75rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
  .clc-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }
  .clc-avatar-lg {
    width: 4rem;
    height: 4rem;
  }
  .clc-thumb {
    width: 3rem;
    height: 3rem;
  }
  .clc-line {
    height: 0.625rem;
  }
  .clc-pulse.clc-body,
  .clc-dot.clc-pulse {
    animation: clc-fade 1.8s ease-in-out infinite;
  }
  .clc-dot.clc-pulse {
    animation-duration: 1.6s;
  }
  @keyframes clc-fade {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .clc-pulse.clc-body,
    .clc-dot.clc-pulse {
      animation: none;
    }
  }
</style>

21:Tdfb,--- interface Props { layout?: "card" | "list" | "profile"; pulse?: boolean; } const { layout = "card", pulse = true } = Astro.props; const listRows = Array.from({ length: 4 }, (_, i) => i); ---

Loading

{ layout === "list" ? ( listRows.map((row) => (

)) ) : layout === "profile" ? (

) : ( <>

) }

22:Tbf9d,

---
interface Props {
  layout?: "card" | "list" | "profile";
  pulse?: boolean;
}
const { layout = "card", pulse = true } = Astro.props;
const listRows = Array.from({ length: 4 }, (_, i) => i);
---

<div class="clc" role="status" aria-label="Loading content">
  <div class="clc-tag">
    <span class:list={["clc-dot", { "clc-pulse": pulse }]} aria-hidden="true"></span>
    Loading
  </div>
  <div class:list={["clc-body", { "clc-pulse": pulse }]}>
    {
      layout === "list" ? (
        listRows.map((row) => (
          <div class="clc-row">
            <div class="clc-block clc-thumb" />
            <div class="clc-lines">
              <div class="clc-block clc-line" style="width: 50%" />
              <div class="clc-block clc-line" style="width: 75%" />
            </div>
          </div>
        ))
      ) : layout === "profile" ? (
        <div class="clc-row clc-profile">
          <div class="clc-circle clc-avatar-lg" />
          <div class="clc-lines">
            <div class="clc-block clc-line" style="width: 33%; height: 0.875rem" />
            <div class="clc-block clc-line" style="width: 50%" />
          </div>
        </div>
      ) : (
        <>
          <div class="clc-image" />
          <div class="clc-row">
            <div class="clc-circle clc-avatar" />
            <div class="clc-lines">
              <div class="clc-block clc-line" style="width: 40%" />
              <div class="clc-block clc-line" style="width: 80%" />
            </div>
          </div>
        </>
      )
    }
  </div>
</div>

<style>
  .clc {
    width: 100%;
    max-width: 24rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    background: color-mix(in srgb, currentColor 3%, transparent);
    padding: 1.25rem;
    color: #fff;
    font-family: system-ui, sans-serif;
  }
  @media (prefers-color-scheme: light) {
    .clc {
      color: #0f172a;
    }
  }
  .clc-tag {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, currentColor 50%, transparent);
  }
  .clc-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #f5c542;
  }
  .clc-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .clc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .clc-profile {
    padding: 1.5rem 0;
  }
  .clc-lines {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0.5rem;
  }
  .clc-block,
  .clc-circle {
    background: color-mix(in srgb, currentColor 10%, transparent);
    flex-shrink: 0;
  }
  .clc-block {
    border-radius: 0.5rem;
  }
  .clc-circle {
    border-radius: 9999px;
  }
  .clc-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 0.75rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
  .clc-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }
  .clc-avatar-lg {
    width: 4rem;
    height: 4rem;
  }
  .clc-thumb {
    width: 3rem;
    height: 3rem;
  }
  .clc-line {
    height: 0.625rem;
  }
  .clc-pulse.clc-body,
  .clc-dot.clc-pulse {
    animation: clc-fade 1.8s ease-in-out infinite;
  }
  .clc-dot.clc-pulse {
    animation-duration: 1.6s;
  }
  @keyframes clc-fade {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .clc-pulse.clc-body,
    .clc-dot.clc-pulse {
      animation: none;
    }
  }
</style>

Nearby