epic-loading-animations/src/components/horizontal-bars-page-change/horizontal-bars-page-change.mdx

Spinners and Transitions to use in React apps

import {ArgTypes, Meta} from "@storybook/blocks";
import HorizontalBarsPageChangeStories from "./horizontal-bars-page-change.stories";

<Meta of={HorizontalBarsPageChangeStories} />

Horizontal Bars Page Change
==============

# Usage
## Adding to Project
Add the transition component to your root `layout.tsx` file.<br/>
In the layout component, add a boolean state called `shown`. This is the toggle that will turn on and off the animation.<br/>
Set the onTransitionEnd prop to an arrow function that returns setShown(false). `onTransitionEnd={() => setShown(false)}`<br/>
**Reference the ArgTable and adjust other properties as you'd like.

### Example Usage in Next.js Project

    ```tsx
    //layout.tsx
    import HorizontalBarsPageChange from "epic-loading-animations";

    export default function Layout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
        const [shown, setShown] = useState<boolean>(false);

        return (
    		<>
    			{/*PLAYS ON TOP OF PAGE*/}
    			<HorizontalBarsPageChange
                    shown={shown}
                    startColor="#C08DE1"
                    endColor="#593770"
                    numBars={7}
                    onTransitionEnd={() => setShown(false)}
                />
    			{children}
    		</>
      );
    }
    ```

### Gradient
The start color property is required, which is the color the top-most bar will be.<br/>
If no endColor is provided, all the bars will be the same color and form a solid color<br/>
If an endColor is provided, the horizontal bars will form a gradient out of discretely colored horizontal bars.
The colors are automatically calculated to perfectly form a gradient no matter the number of bars or the colors.

# Parameters
<ArgTypes />