v0.9.9defuss-shadcn
Theme
Design your own

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