See Live Demo:

https://gxxbmv.csb.app/

Playground

https://codesandbox.io/s/ueep-smart-loader-gxxbmv

Description

This is an awesome package to make your dream project more attractive and interactive. You can use various animated Icons and random Quotes to as an interactive loader to make your website really smart. It's always nice to have flexibilities and options that's why we try our best to give you that. You can use this loader as you want, you can use the icon only and for that you don't need to pass the quote property. it will make the background transparent if you don't pass the background property. if you set quote property as only an empty object then it will show some awesome, nice quote randomly.

Install

npm i @ueep/smart-loading

Usage

@ueep/smart-loading is an awesome package to make your dream project more attractive and interactive. You can use various animated Icons and random Quotes to as an interactive loader to make your website really smart.

import {UeepLoader} from '@ueep/smart-loading';

function App() {
  const [loading, setLoading] = React.useState(true);
  return (
    ........
      {loading && <UeepLoader
        icon={'loading'}
        background={'white'}
        quote={{
          // you can also pass your own quote or text here as a parameter named "text"
          // you can also pass author here as a parameter named "author"
          font: 'cursive', // use any font-family
          quotation: true // this option is to show the quotation signs
        }}
      />}
    .......
  );
}

export default App;

N.B: You can use a lot more options to customize the Loader as you want, please see the available options below.

Available options

It's always nice to have flexibilities and options that's why we try our best to give you that. You can use this loader as you want, you can use the icon only and for that you don't need to pass the quote property. it will make the background transparent if you don't pass the background property. if you set quote property as only an empty object {} then it will show some awesome, nice quote randomly.

| Props | Type | Default | Details | |----------------|-------------------------|-------------------------|------------------------------------------------------------------------------------------------------------| | icon | String or JSON URL | paperPlane | This is the name of the icon, you will get all the names below. You can also pass the Lottie file JSON URL | | quote | Object | {quotation: true} | | | background | String | #FFFFFF | | | width | String (px, % anything) | 30% | | | height | String (px, % anything) | auto | | | borderRadius | String (px, % anything) | 20px | | | iconWidth | Number | 100 | | | iconHeight | Number | 100 | | | className | String | | | | position | String | center | | | overlayColor | String | #000000 | | | overlayOpacity | String | 0.45 | |

Positions

You can always set the position of the loader on the screen by passing the position property though it is center by default if you don't pass. Below you can see some positional values.

• top-left
• bottom-left
• top-right
• bottom-right
• center (default)

Available icons

• random (to show an icon randomly)
• blueCircle
• bouncingBall
• circleSpinner
• dancingPig
• circleToShape
• fourDot
• fourBox
• loading
• loadingSpinner
• nature
• owl
• paperPlane (default)
• threeDot
• waterDrop
• thinking

Screenshots

| License | | |---------|-----------------------------------------------------------| | MIT | © UEEP Inc |