Loader with Spinner (loader/loader.tsx)

chakra-ui · ui, UI / Frontend, react, loader, spinner, loading

Displays a loading spinner with optional text and placement; hides children when not visible, customizable via props.

// Source: https://github.com/mperkins0155/chakra-ui | License: MIT | Copyright 2019 Chakra Systems Inc
// Provided via justclaw.it.com; keep this notice with the code.
import * as React from "react"
import type { HTMLChakraProps } from "../../styled-system"
import { AbsoluteCenter } from "../absolute-center"
import { Span } from "../span"
import { Spinner } from "../spinner"

export interface LoaderProps extends HTMLChakraProps<"span"> {
  /**
   * Whether the loader is visible
   * @default true
   */
  visible?: boolean | undefined
  /**
   * The spinner to display when loading
   */
  spinner?: React.ReactNode | undefined
  /**
   * The placement of the spinner
   * @default "start"
   */
  spinnerPlacement?: "start" | "end" | undefined
  /**
   * The text to display when loading
   */

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key