react-loader-spinner

  • Version 6.1.6
  • Published
  • 7.31 MB
  • 2 dependencies
  • MIT license

Install

npm i react-loader-spinner
yarn add react-loader-spinner
pnpm add react-loader-spinner

Overview

react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

Index

Variables

variable Audio

const Audio: FunctionComponent<AudioProps>;

    variable BallTriangle

    const BallTriangle: FunctionComponent<BallTriangleProps>;

      variable Bars

      const Bars: FunctionComponent<BarsProps>;

        variable Blocks

        const Blocks: FunctionComponent<BlocksProps>;

          variable Circles

          const Circles: FunctionComponent<CirclesProps>;

            variable CirclesWithBar

            const CirclesWithBar: React.FunctionComponent<Props>;
            • contains two circles rotating in opposite direction and a wave bars. outer circle, inner circle and bar color can be set from props.

            variable ColorRing

            const ColorRing: FunctionComponent<ColorRingProps>;

              variable Comment

              const Comment: FunctionComponent<CommentProps>;

                variable Discuss

                const Discuss: FunctionComponent<DiscussProps>;

                  variable DNA

                  const DNA: FunctionComponent<DNAProps>;

                    variable FallingLines

                    const FallingLines: FunctionComponent<FallingLinesProps>;

                      variable FidgetSpinner

                      const FidgetSpinner: FunctionComponent<FidgetSpinnerProps>;

                        variable Grid

                        const Grid: FunctionComponent<GridProps>;

                          variable Hearts

                          const Hearts: FunctionComponent<HeartsProps>;

                            variable Hourglass

                            const Hourglass: FunctionComponent<HourglassProps>;

                              variable InfinitySpin

                              const InfinitySpin: FunctionComponent<_Props1>;

                                variable LineWave

                                const LineWave: React.FunctionComponent<_Props2>;
                                • contains three lines in a wave motion line colors are changeable

                                variable MagnifyingGlass

                                const MagnifyingGlass: FunctionComponent<MagnifyingGlassProps>;

                                  variable MutatingDots

                                  const MutatingDots: FunctionComponent<MutatingDotsProps>;

                                    variable Oval

                                    const Oval: FunctionComponent<OvalProps>;

                                      variable ProgressBar

                                      const ProgressBar: FunctionComponent<ProgressBarProps>;

                                        variable Puff

                                        const Puff: FunctionComponent<PuffProps>;

                                          variable Radio

                                          const Radio: FunctionComponent<RadioProps>;

                                            variable RevolvingDot

                                            const RevolvingDot: FunctionComponent<RevolvingDotProps>;

                                              variable Rings

                                              const Rings: FunctionComponent<RingsProps>;

                                                variable RotatingLines

                                                const RotatingLines: FunctionComponent<_Props3>;

                                                  variable RotatingSquare

                                                  const RotatingSquare: React.FunctionComponent<RotatingSquareProps>;

                                                    variable RotatingTriangles

                                                    const RotatingTriangles: FunctionComponent<RotatingTrianglesProps>;

                                                      variable TailSpin

                                                      const TailSpin: FunctionComponent<TailSpinProps>;

                                                        variable ThreeCircles

                                                        const ThreeCircles: React.FunctionComponent<_Props4>;
                                                        • contains three circles rotating in opposite direction outer circle, middle circle and inner circle color can be set from props.

                                                        variable ThreeDots

                                                        const ThreeDots: FunctionComponent<ThreeDotsProps>;

                                                          variable Triangle

                                                          const Triangle: FunctionComponent<BaseProps>;
                                                          • Styles Ends

                                                          variable Vortex

                                                          const Vortex: FunctionComponent<VortexProps>;

                                                            variable Watch

                                                            const Watch: FunctionComponent<WatchProps>;

                                                              Interfaces

                                                              interface AudioProps

                                                              interface AudioProps extends BaseProps {}

                                                                interface BallTriangleProps

                                                                interface BallTriangleProps extends BaseProps {}

                                                                  property radius

                                                                  radius?: string | number;

                                                                    interface BarsProps

                                                                    interface BarsProps extends BaseProps {}

                                                                      interface BaseProps

                                                                      interface BaseProps extends PrimaryProps {}

                                                                        property color

                                                                        color?: string;

                                                                          interface BlocksProps

                                                                          interface BlocksProps extends BaseProps {}

                                                                            interface CirclesProps

                                                                            interface CirclesProps extends BaseProps {}

                                                                              interface ColorRingProps

                                                                              interface ColorRingProps extends Omit<BaseProps, 'color'> {}

                                                                                property colors

                                                                                colors?: [string, string, string, string, string];

                                                                                  interface CommentProps

                                                                                  interface CommentProps extends BaseProps {}

                                                                                    property backgroundColor

                                                                                    backgroundColor?: string;

                                                                                      interface DiscussProps

                                                                                      interface DiscussProps extends Omit<BaseProps, 'color'> {}

                                                                                        property colors

                                                                                        colors?: [string, string];

                                                                                          interface DNAProps

                                                                                          interface DNAProps extends Omit<BaseProps, 'color'> {}

                                                                                            interface FidgetSpinnerProps

                                                                                            interface FidgetSpinnerProps extends Omit<BaseProps, 'color'> {}

                                                                                              property backgroundColor

                                                                                              backgroundColor?: string;

                                                                                                property ballColors

                                                                                                ballColors?: [string, string, string];

                                                                                                  interface GridProps

                                                                                                  interface GridProps extends BaseProps {}

                                                                                                    property radius

                                                                                                    radius?: string | number;

                                                                                                      interface HeartsProps

                                                                                                      interface HeartsProps extends BaseProps {}

                                                                                                        interface HourglassProps

                                                                                                        interface HourglassProps extends Omit<BaseProps, 'color'> {}

                                                                                                          property colors

                                                                                                          colors?: [string, string];

                                                                                                            interface MagnifyingGlassProps

                                                                                                            interface MagnifyingGlassProps extends BaseProps {}

                                                                                                              property glassColor

                                                                                                              glassColor?: string;

                                                                                                                interface MutatingDotsProps

                                                                                                                interface MutatingDotsProps extends BaseProps {}

                                                                                                                  property radius

                                                                                                                  radius?: string | number;

                                                                                                                    property secondaryColor

                                                                                                                    secondaryColor?: string;

                                                                                                                      interface OvalProps

                                                                                                                      interface OvalProps extends BaseProps {}

                                                                                                                        property secondaryColor

                                                                                                                        secondaryColor?: string;

                                                                                                                          property strokeWidth

                                                                                                                          strokeWidth?: string | number;

                                                                                                                            property strokeWidthSecondary

                                                                                                                            strokeWidthSecondary?: string | number;

                                                                                                                              interface PrimaryProps

                                                                                                                              interface PrimaryProps {}

                                                                                                                                property ariaLabel

                                                                                                                                ariaLabel?: string;

                                                                                                                                  property height

                                                                                                                                  height?: string | number;

                                                                                                                                    property visible

                                                                                                                                    visible?: boolean;

                                                                                                                                      property width

                                                                                                                                      width?: string | number;

                                                                                                                                        property wrapperClass

                                                                                                                                        wrapperClass?: string;

                                                                                                                                          property wrapperStyle

                                                                                                                                          wrapperStyle?: Style;

                                                                                                                                            interface ProgressBarProps

                                                                                                                                            interface ProgressBarProps extends Omit<BaseProps, 'color'> {}

                                                                                                                                              property barColor

                                                                                                                                              barColor?: string;

                                                                                                                                                property borderColor

                                                                                                                                                borderColor?: string;

                                                                                                                                                  interface PuffProps

                                                                                                                                                  interface PuffProps extends BaseProps {}

                                                                                                                                                    property radius

                                                                                                                                                    radius?: string | number;

                                                                                                                                                      property secondaryColor

                                                                                                                                                      secondaryColor?: string;

                                                                                                                                                        interface RadioProps

                                                                                                                                                        interface RadioProps extends Omit<BaseProps, 'color'> {}

                                                                                                                                                          property colors

                                                                                                                                                          colors?: [string, string, string];

                                                                                                                                                            interface RevolvingDotProps

                                                                                                                                                            interface RevolvingDotProps extends BaseProps {}

                                                                                                                                                              property radius

                                                                                                                                                              radius?: number;

                                                                                                                                                                property secondaryColor

                                                                                                                                                                secondaryColor?: string;

                                                                                                                                                                  property strokeWidth

                                                                                                                                                                  strokeWidth?: number;

                                                                                                                                                                    interface RingsProps

                                                                                                                                                                    interface RingsProps extends BaseProps {}

                                                                                                                                                                      property radius

                                                                                                                                                                      radius?: string | number;

                                                                                                                                                                        interface RotatingTrianglesProps

                                                                                                                                                                        interface RotatingTrianglesProps extends Omit<BaseProps, 'color'> {}

                                                                                                                                                                          property colors

                                                                                                                                                                          colors?: [string, string, string];

                                                                                                                                                                            interface TailSpinProps

                                                                                                                                                                            interface TailSpinProps extends BaseProps {}

                                                                                                                                                                              property radius

                                                                                                                                                                              radius?: string | number;

                                                                                                                                                                                property strokeWidth

                                                                                                                                                                                strokeWidth?: string | number;

                                                                                                                                                                                  interface ThreeDotsProps

                                                                                                                                                                                  interface ThreeDotsProps extends BaseProps {}

                                                                                                                                                                                    property radius

                                                                                                                                                                                    radius?: string | number;

                                                                                                                                                                                      interface VortexProps

                                                                                                                                                                                      interface VortexProps extends Omit<BaseProps, 'color'> {}

                                                                                                                                                                                        property colors

                                                                                                                                                                                        colors?: [string, string, string, string, string, string];

                                                                                                                                                                                          interface WatchProps

                                                                                                                                                                                          interface WatchProps extends BaseProps {}

                                                                                                                                                                                            property radius

                                                                                                                                                                                            radius?: string | number;

                                                                                                                                                                                              Type Aliases

                                                                                                                                                                                              type FallingLinesProps

                                                                                                                                                                                              type FallingLinesProps = {
                                                                                                                                                                                              color?: string;
                                                                                                                                                                                              width?: string;
                                                                                                                                                                                              height?: string;
                                                                                                                                                                                              visible?: boolean;
                                                                                                                                                                                              };

                                                                                                                                                                                                type Props

                                                                                                                                                                                                type Props = {
                                                                                                                                                                                                wrapperStyle?: Style;
                                                                                                                                                                                                visible?: boolean;
                                                                                                                                                                                                wrapperClass?: string;
                                                                                                                                                                                                height?: string | number;
                                                                                                                                                                                                width?: string | number;
                                                                                                                                                                                                color?: string;
                                                                                                                                                                                                outerCircleColor?: string;
                                                                                                                                                                                                innerCircleColor?: string;
                                                                                                                                                                                                barColor?: string;
                                                                                                                                                                                                ariaLabel?: string;
                                                                                                                                                                                                };

                                                                                                                                                                                                  type RotatingSquareProps

                                                                                                                                                                                                  type RotatingSquareProps = {
                                                                                                                                                                                                  wrapperClass?: string;
                                                                                                                                                                                                  color?: string;
                                                                                                                                                                                                  strokeWidth?: string | number;
                                                                                                                                                                                                  height?: string | number;
                                                                                                                                                                                                  width?: string | number;
                                                                                                                                                                                                  ariaLabel?: string;
                                                                                                                                                                                                  wrapperStyle?: Style;
                                                                                                                                                                                                  visible?: boolean;
                                                                                                                                                                                                  };

                                                                                                                                                                                                    type Style

                                                                                                                                                                                                    type Style = {
                                                                                                                                                                                                    [key: string]: string;
                                                                                                                                                                                                    };

                                                                                                                                                                                                      type TriangleProps

                                                                                                                                                                                                      type TriangleProps = BaseProps;

                                                                                                                                                                                                        Package Files (1)

                                                                                                                                                                                                        Dependencies (2)

                                                                                                                                                                                                        Dev Dependencies (24)

                                                                                                                                                                                                        Peer Dependencies (2)

                                                                                                                                                                                                        Badge

                                                                                                                                                                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-loader-spinner.

                                                                                                                                                                                                        • Markdown
                                                                                                                                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-loader-spinner)
                                                                                                                                                                                                        • HTML
                                                                                                                                                                                                          <a href="https://www.jsdocs.io/package/react-loader-spinner"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>