# @ueep/smart-loading

> 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.

Latest version **1.0.9** (published 2022-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ueep/smart-loading
pnpm add @ueep/smart-loading
yarn add @ueep/smart-loading
bun add @ueep/smart-loading
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-05-21 |
| First published | 2022-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | UEEP Inc |
| Maintainers | ueep |

## Links

- npm: https://www.npmjs.com/package/@ueep/smart-loading
- npm.io page: https://npm.io/package/@ueep/smart-loading

## Recent versions

- 1.0.9 (latest) — 2022-05-21
- 1.0.8 — 2022-05-20
- 1.0.7 — 2022-05-19
- 1.0.6 — 2022-05-19
- 1.0.5 — 2022-05-19
- 1.0.4 — 2022-05-19
- 1.0.3 — 2022-05-19
- 1.0.2 — 2022-05-19
- 1.0.1 — 2022-05-18
- 1.0.0 — 2022-05-17

## README

<p align="center">
<a href="https://ueepinc.com/">
    <img width="200" src="https://i.ibb.co/hYG1k8Q/ueep-logo.png" alt="ueep-logo" border="0">
</a>
</p>

<h1 align="center" style="color: purple">
@ueep/smart-loading
</h1>

<br/><br/><br/>

[![NPM version](https://img.shields.io/npm/v/@ueep/smart-loading.svg?style=flat)](https://www.npmjs.com/package/@ueep/smart-loading) 
[![NPM downloads](https://img.shields.io/npm/dm/@ueep/smart-loading.svg?style=flat)](https://www.npmjs.com/package/@ueep/smart-loading)

## 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

```bash
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.

```js
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

<div>
<a style="float: left; width: 50%; padding: 20px;" href="https://ueepinc.com/"><img src="https://i.ibb.co/L6GcCh1/ueep-smart-loading-1.png" alt="ueep-smart-loading-1" border="0"></a>
<a style="float: right; width: 50%; padding: 20px;" href="https://ueepinc.com/"><img src="https://i.ibb.co/12pq4dh/ueep-smart-loading-2.png" alt="ueep-smart-loading-2" border="0"></a>
<a style="float: left; width: 50%; padding: 20px;" href="https://ueepinc.com/"><img src="https://i.ibb.co/GM2RZKC/ueep-smart-loading-3.png" alt="ueep-smart-loading-3" border="0"></a>
<a style="float: right; width: 50%; padding: 20px;" href="https://ueepinc.com/"><img src="https://i.ibb.co/XDTm71z/ueep-smart-loading-4.png" alt="ueep-smart-loading-4" border="0"></a>
<a style="float: left; width: 50%; padding: 20px;" href="https://ueepinc.com/"><img src="https://i.ibb.co/N3b0Xm7/ueep-smart-loading-5.png" alt="ueep-smart-loading-5" border="0"></a>
</div>

| License |                                                           |
|---------|-----------------------------------------------------------|
| MIT     | &copy; [UEEP Inc](https://github.com/ueepinc)             |

---
_Source: https://npm.io/package/@ueep/smart-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._