react-page-loading-v2

React component that shows a loading spinner for a set duration, then reveals your content.
Rewritten in TypeScript with support for React 16.14 → 19.

---

✨ Features

• Simple API with functional components + hooks.
• Written in TypeScript – ships .d.ts for autocompletion.
• Supports React 19 and still works with React 16, 17, 18.
• Compatible with any router / app structure.
• Lightweight: no webpack/UMD bundle, just ESM + CJS.

---

📦 Installation

# npm
npm install react-page-loading-v2

# yarn
yarn add react-page-loading-v2

# pnpm
pnpm add react-page-loading-v2

---

🚀 Usage

import React from "react";
import PageLoading from "react-page-loading-v2";

export default function App() {
  return (
    <PageLoading duration={2000} type="bars" color="#A9A9A9">
      <h1>Welcome!</h1>
      <p>Your content is ready.</p>
    </PageLoading>
  );
}

• The spinner shows for 2 seconds, then the children are rendered.

---

⚙️ Props

Name	Type	Default	Description
duration	number	1300	Time in ms to show the loader before showing children
color	string	#A9A9A9	Spinner color
height	number | string	40	Spinner height
width	number | string	40	Spinner width
type	one of react-loading types	"bars"	Spinner animation style
children	React.ReactNode	—	Content to render after loading finishes

Supported type values

blank, balls, bars, bubbles, cubes, cylon, spin, spinningBubbles, spokes

---

🧑‍💻 Contributing

Contributions are welcome! See CONTRIBUTING.md.

---

📜 License

MIT License © 2022–2025 Devzer Studios and contributors.