react-ui-loader

Loader and Shimmer developed with customizable UI options to add different elemnets in each.

demo: https://react-ui-loader-demo.vercel.app/

Installation

npm i react-ui-loader

or

yarn add react-ui-loader

LOADER demo

import { TextLoader } from "react-ui-loader";

const MyComponents = ()=> {
    return (
        <TextLoader show={true} />
    )
}

export default MyComponents

Loader

Props

| Prop Name | DataType | Required | Default Value | Description | | ----------------- | ---------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------ | | show | boolean | yes | true | Determines whether to hide or show loader | | bgColor | string | no | black | Takes hex values of color as input to determine background color of loading screen | | widthValue | string or number | no | 100vw | Determines the width of loading screen | | heightValue | string or number | no | 100vh | Determines the height of loading screen | | zIndexing | number | no | 1 | Determines the z-index for loading screen | | backgroundOpacity | number | no | 1 | Determines the opacity of background in Loader | | justifycontent | string | no | center | Determines the horizontal position of loader icon, loader text and loader image according to flex properties | | alignitems | string | no | center | Determines the vertical position of loader icon, loader text and loader image according to flex properties | | loaderText | string | no | Loading... | Takes input as the text you want to display on loading screen | | textColor | string | no | white | Takes input as the color of the text you want to display on loading screen | | fontSizeValue | string | no | 18px | Takes input as the font size of the text you want to display on loading screen | | fontWeightValue | number | no | 400 | Takes input as the font weight of the text you want to display on loading screen | | loaderColor | string | no | white | Takes string as input to determine the color of loader | | loader | boolean | no | false | Determines wheteher to show the loader or not | | loaderStyle | string | no | Circular | Determines the style of the loader | | loaderSize | string | no | medium | Determines the size of the loader | | textAnimate | boolean | no | false | Determines if we want to give an animation to the loading text | | children | ReactNode | no | null | Takes ReactNode as input to determine the logo in the loader | | logo | boolean | no | false | Determines if we want to show the logo or not | | logoHeight | string | no | 48px | Determines the height of logo in loading screen | | logoWidth | string | no | 48px | Determines the width of logo in loading screen | | logoAnimate | boolean | no | false | Determines if we want to give an animation to the logo | | row | boolean | no | true | Arrange loader icon, loader text and loader image in a row or column |

Shimmer demo

import { ProfileShimmer } from "react-ui-loader";

const MyComponents = ()=> {
    return (
        <ProfileShimmer show={true} />
    )
}

export default MyComponents

Shimmer

Props

| Prop Name | DataType | Required | Default Value | Description | | --------------------- | -------- | -------- | ------------- | ------------------------------------------------------------ | | show | boolean | yes | true | Determines whether to hide or show shimmer | | profilePositionCenter | boolean | no | false | Determines if profile picture must be in center or not | | profileShape | string | no | circle | Determines the shape of profile picure | | coverHeight | string | no | 25% | Determines the height of cover picure | | showCover | boolean | no | true | Determines the whether to hide or display the cover picure | | showProfile | boolean | no | true | Determines the whether to hide or display the profile picure | | showLines | boolean | no | true | Determines the whether to hide or display the lines | | numberOfLines | number | no | 10 | Determines the total number of lines to display | | numberOfCards | number | no | 10 | Determines the total number of Cards to display | | showCards | boolean | no | true | Determines the whether to hide or display the cards | | cardHeight | string | no | 420px | Determines the height of cards | | cardWidth | string | no | 420px | Determines the width of cards | | backgroundColor | string | no | white | Determines the color of background | | color | string | no | gray | Determines the color of components | | shimmerColor | string | no | white | Determines the color of shimmer effect | | profileDimension | string | no | 200px | Determines the size of profile picure | | coverWidth | string | no | 100% | Determines the width of cover picure | | lineHeight | string | no | 10px | Determines the height of lines in shimmer | | lineWidth | string | no | 98% | Determines the width of lines in shimmer | | shimmerHeight | string | no | fit-content | Determines the height of shimmer component | | shimmerWidth | string | no | 100% | Determines the width of shimmer component |