react-pendulum-loader
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

Pendulum loader for react

A pretty pendulum effect for loading screens

Intall

You can get it on NPM installing react-pendulum-loader component as a project dependency.

npm install react-pendulum-loader

Screen Shot

Setup

You'll need to add react-pendulum-loader to your app.js or any other component where you want to use loader. So that, the <Loader /> components will be accessible in your application.

...
import { Loader } from "react-pendulum-loader";
...

function App() {

	const [ isLoading, setIsLoading ] = useState(true)

	useEffect(() => {
		setTimeout(() => {
			setIsLoading(false)
		}, 10000)
	}, [])

	return (
		<div className="App">
			<Loader show={isLoading} duration="3s" backgroundDim={.3} dotColor="purple" />
		</div>
	);
}

Options

  • show: boolean - use state variable to handle visibility;
  • duration: string - duration for pendulum animation effect;
  • backgroundDim: number - opacity to dim the background overlay;
  • dotColor: string - color of pendulum's dot;

Package Sidebar

Install

npm i react-pendulum-loader

Weekly Downloads

2

Version

1.0.5

License

ISC

Unpacked Size

558 kB

Total Files

15

Last publish

Collaborators

  • karthisgk