v0.9.4defuss-shadcn
Theme

defuss-shadcn / Website / Search & Navigation / load-more

Built with: CSS

Load MoreBLK

Loads another batch into the current collection - how many are shown, a progress bar and the button, with a busy state while loading. Part of the Search & Navigation blocks.

On this page (3)
Component Skill — components/load-more/component-skill.md

Native basis

A centered block: "Showing 24 of 248", a <progress>, and a Button-styled <a href="?page=3">; while loading, set aria-busy="true" on it - CSS shows the spinner and dims it.

Built from

Progress, Button, Spinner.

Web Platform APIs

<progress><output>prefers-reduced-motion

Classes

.mk-load-more.mk-load-more-button.mk-load-more-spin

Data attributes

aria-busy="true" on the button while loading.

§Default

How many are shown (<output>), a thin <progress>, and a link-button to the next page - it works without script; your script can fetch the batch instead.

§Loading

aria-busy="true" on the button while the next batch loads: CSS swaps the arrow for a spinner (slower under reduced motion) and ignores clicks.

§CSS view file

/* -- Load More (website · Search & Navigation) ----------------------------
   Loads another batch into the current collection - how many are shown, a progress bar and the button, with a busy state while loading. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-load-more, .mk-load-more *, .mk-load-more ::before, .mk-load-more ::after) { box-sizing: border-box; }
  .mk-load-more { display: grid; justify-items: center; gap: 0.75rem; width: 100%; padding-block: 1.5rem;
    & output { color: var(--muted-foreground); font-size: 0.875rem; }
    & output strong { color: var(--foreground); }
    & progress { width: min(100%, 14rem); height: 0.25rem; }
  }
  .mk-load-more-button {
    & .mk-load-more-spin { display: none; width: 1rem; height: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: mk-load-more-spin 700ms linear infinite; }
    &[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
    &[aria-busy="true"] .mk-load-more-spin { display: inline-block; }
    &[aria-busy="true"] svg { display: none; }
  }
  @keyframes mk-load-more-spin { to { rotate: 1turn; } }
  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-load-more-spin { animation-duration: 2.4s; }
  }
  @media (forced-colors: active) {
    .mk-load-more-spin { border-color: CanvasText; border-inline-end-color: transparent; }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub