tessl/npm-react-spinners

A comprehensive collection of customizable React loading spinner components with TypeScript support

—

Pending

Overview

Eval results

Files

Bar and Linear Spinners

Name: tessl/npm-react-spinners
Author: tessl

Linear progress indicators and bar animations, perfect for form submissions and content loading states. These spinners use height and width properties for precise sizing control.

Capabilities

BarLoader

A horizontal progress bar with animated loading fill.

/**
 * Horizontal progress bar with animated loading fill
 * @param props - LoaderHeightWidthProps with height and width configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function BarLoader(props: LoaderHeightWidthProps): JSX.Element | null;

Default Values:

height: 4
width: 100
color: "#000000"
loading: true
speedMultiplier: 1

Usage Examples:

import { BarLoader } from "react-spinners";

// Basic progress bar
<BarLoader loading={isLoading} color="#36d7b7" />

// Full-width progress bar
<BarLoader
  loading={true}
  color="#007bff"
  width="100%"
  height={6}
  cssOverride={{
    display: "block",
    margin: "0 auto",
  }}
/>

// Thick progress bar for forms
<BarLoader
  loading={isSubmitting}
  color="#28a745"
  width={300}
  height={8}
/>

// Top-of-page loading bar
<BarLoader
  loading={isPageLoading}
  color="#ff6b6b"
  width="100vw"
  height={3}
  cssOverride={{
    position: "fixed",
    top: 0,
    left: 0,
    zIndex: 9999,
  }}
/>

FadeLoader

Multiple vertical bars that fade in and out sequentially.

/**
 * Multiple vertical bars that fade in and out sequentially
 * @param props - LoaderHeightWidthRadiusProps with height, width, radius, and margin
 * @returns JSX.Element | null - Returns null when loading is false
 */
function FadeLoader(props: LoaderHeightWidthRadiusProps): JSX.Element | null;

Default Values:

height: 15
width: 5
radius: 2
margin: 2
color: "#000000"
loading: true
speedMultiplier: 1

Usage Examples:

import { FadeLoader } from "react-spinners";

// Basic fading bars
<FadeLoader loading={isLoading} color="#17a2b8" />

// Taller bars with custom spacing
<FadeLoader
  loading={true}
  color="#6610f2"
  height={25}
  width={6}
  margin={3}
/>

// Rounded bars
<FadeLoader
  loading={true}
  color="#e83e8c"
  height={20}
  width={4}
  radius={4}
  cssOverride={{
    display: "flex",
    justifyContent: "center",
  }}
/>

// Fast fade animation
<FadeLoader
  loading={true}
  color="#fd7e14"
  speedMultiplier={1.5}
  height={30}
/>

Common Patterns

Progress Bar Overlays

BarLoader works well as a progress overlay:

<div style={{ position: "relative" }}>
  <div className="content">
    {/* Your content here */}
  </div>
  <BarLoader
    loading={isLoading}
    color="#007bff"
    width="100%"
    height={4}
    cssOverride={{
      position: "absolute",
      top: 0,
      left: 0,
    }}
  />
</div>

Form Loading States

Perfect for form submissions:

<form onSubmit={handleSubmit}>
  <BarLoader
    loading={isSubmitting}
    color="#28a745"
    width="100%"
    height={2}
    cssOverride={{ marginBottom: 16 }}
  />
  
  <input type="text" placeholder="Enter data..." />
  <button type="submit" disabled={isSubmitting}>
    {isSubmitting ? "Submitting..." : "Submit"}
  </button>
</form>

Page Loading Indicators

Top-of-page loading bars:

// Layout component
function Layout({ children }) {
  const [isLoading, setIsLoading] = useState(false);
  
  return (
    <>
      <BarLoader
        loading={isLoading}
        color="#007bff"
        width="100%"
        height={3}
        cssOverride={{
          position: "fixed",
          top: 0,
          left: 0,
          zIndex: 1000,
        }}
      />
      <main>{children}</main>
    </>
  );
}

Content Loading with FadeLoader

FadeLoader for content areas:

<div className="content-area">
  {isLoading ? (
    <div style={{ textAlign: "center", padding: 40 }}>
      <FadeLoader loading={true} color="#6c757d" />
      <p style={{ marginTop: 16, color: "#6c757d" }}>
        Loading content...
      </p>
    </div>
  ) : (
    <div>{content}</div>
  )}
</div>

Responsive Bar Sizing

Use viewport units for responsive bars:

<BarLoader
  loading={true}
  width="90vw"
  height="0.5vh"
  cssOverride={{
    maxWidth: "600px",
    minHeight: "2px",
  }}
/>

Custom Animations

Adjust speed for different contexts:

// Slow for heavy operations
<BarLoader
  loading={isProcessing}
  speedMultiplier={0.5}
  color="#dc3545"
/>

// Fast for quick operations
<FadeLoader
  loading={isValidating}
  speedMultiplier={2}
  color="#28a745"
/>

Accessibility

Include appropriate ARIA attributes:

<div role="progressbar" aria-label="Loading content">
  <BarLoader
    loading={true}
    color="#007bff"
    width="100%"
    aria-hidden="true"
  />
  <span className="sr-only">Loading, please wait...</span>
</div>

Install with Tessl CLI