🚀 LoadEase – Beautiful Loading Indicators & Skeleton Screens

LoadEase is a lightweight and customizable package for displaying beautiful loading spinners, skeleton screens, and full-page loaders in React.js, Next.js, Vue.js, Nuxt.js, Laravel, and vanilla JavaScript apps.

---

🎯 Features

• ✅ Simple & Lightweight – Minimal impact on performance
• ✅ Custom Loaders – Includes spinners, progress bars, and animated skeleton screens
• ✅ Framework Agnostic – Works with React, Vue, Next.js, Nuxt.js, Laravel, and plain JavaScript
• ✅ Easy Customization – Customize colors, sizes, durations, and animations
• ✅ API-Aware Loaders – Hide loaders automatically after fetch/axios requests
• ✅ Responsive & Accessible – Mobile-friendly and keyboard/screen-reader compatible

---

🚀 Usage (Basic Example)

---

⚛️ React

1import React from "react";
2import { LoaderSpinner } from "loadease-v2";
3
4function App() {
5  return (
6    <div>
7      <h1>My App</h1>
8      <LoaderSpinner color="#14AE88" size={40} speed={800} />
9    </div>
10  );
11}

🔮 Vue 3

1<template>
2  <div>
3    <h1>My Vue App</h1>
4    <LoaderSpinner :color="'#14AE88'" :size="40" :speed="800" />
5  </div>
6</template>
7
8<script>
9import { LoaderSpinner } from "loadease-v2";
10
11export default {
12  components: { LoaderSpinner },
13};
14</script>
15

🧱 Laravel (Blade + JS)

1<!-- resources/views/welcome.blade.php -->
2<div id="app">
3  <h1>Laravel Loader Example</h1>
4  <div id="loader"></div>
5</div>
6
7<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
8<script>
9  const loader = LoadEase.LoaderSpinner({
10    color: "#14AE88",
11    size: 40,
12    speed: 1000,
13  });
14
15  document.getElementById("loader").appendChild(loader);
16</script>
17

⚙️ Vanilla JavaScript (Raw Project)

1<div id="loader-container"></div>
2
3<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
4<script>
5  const loader = LoadEase.LoaderSpinner({
6    color: "#3490dc",
7    size: 50,
8  });
9
10  document.getElementById("loader-container").appendChild(loader);
11</script>
12

🌈 Tailwind CSS Example

1import { LoaderSpinner } from "loadease-v2";
2
3export default function TailwindApp() {
4  return (
5    <div className="flex items-center justify-center min-h-screen bg-gray-100">
6      <LoaderSpinner color="#14AE88" size={60} />
7    </div>
8  );
9}
10

🎨 Bootstrap Example

1<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
2  <div id="bootstrap-loader"></div>
3</div>
4
5<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
6<script>
7  const loader = LoadEase.LoaderSpinner({ color: "#0d6efd", size: 50 });
8  document.getElementById("bootstrap-loader").appendChild(loader);
9</script>
10

🧪 Axios/Fetch Loader Handling

With fetch API

1import React, { useEffect, useState } from "react";
2import { LoaderSpinner } from "loadease-v2";
3
4function FetchExample() {
5  const [loading, setLoading] = useState(true);
6  const [data, setData] = useState(null);
7
8  useEffect(() => {
9    fetch("https://jsonplaceholder.typicode.com/posts/1")
10      .then(res => res.json())
11      .then(json => {
12        setData(json);
13        setLoading(false);
14      });
15  }, []);
16
17  return (
18    <div>
19      {loading ? (
20        <LoaderSpinner color="#14AE88" size={40} />
21      ) : (
22        <pre>{JSON.stringify(data, null, 2)}</pre>
23      )}
24    </div>
25  );
26}
27

With axios

1import React, { useEffect, useState } from "react";
2import axios from "axios";
3import { LoaderSpinner } from "loadease-v2";
4
5function AxiosExample() {
6  const [loading, setLoading] = useState(true);
7  const [post, setPost] = useState(null);
8
9  useEffect(() => {
10    axios.get("https://jsonplaceholder.typicode.com/posts/1").then(res => {
11      setPost(res.data);
12      setLoading(false);
13    });
14  }, []);
15
16  return (
17    <div>
18      {loading ? <LoaderSpinner size={40} color="#14AE88" /> : <p>{post.title}</p>}
19    </div>
20  );
21}
22

🌍 CDN (for HTML, Laravel, WordPress, etc.)

1<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
2
3<div id="loader"></div>
4<script>
5  const loader = LoadEase.LoaderSpinner({ color: "#14AE88", size: 50 });
6  document.getElementById("loader").appendChild(loader);
7</script>
8
9

🛡️ TypeScript Support (React)

1import React, { useState } from "react";
2import { LoaderSpinner } from "loadease-v2";
3
4const TSComponent: React.FC = () => {
5  const [loading, setLoading] = useState<boolean>(true);
6
7  return (
8    <div>
9      {loading ? (
10        <LoaderSpinner size={40} color="#14AE88" speed={1000} />
11      ) : (
12        <p>Loaded!</p>
13      )}
14    </div>
15  );
16};
17
18export default TSComponent;
19
20

📦 Installation

Install using npm or yarn:

1npm install loadease-v2
2# or
3yarn add loadease-v2