Loader

Swap content for a spinner or loading text while work is in progress.

React, Vue, Solid, and Svelte

Source
Hidden while loadingLoading…

Button uses it for its loading state. With text, it shows the spinner next to the text. Without it, the spinner sits over the children, which stay hidden but keep their size. Set visible={false} to show the children.

Usage

import { Loader } from "@isbatak/react-ui/loader"
import { HStack, styled } from "styled-system/jsx"

export function LoaderDemo() {
  return (
    <HStack gap="6">
      <styled.span position="relative" display="inline-flex">
        <Loader>Hidden while loading</Loader>
      </styled.span>
      <styled.span display="inline-flex" alignItems="center" gap="2">
        <Loader text="Loading…" />
      </styled.span>
    </HStack>
  )
}