Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (loadease-v2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🚀 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

import React from "react";
import { LoaderSpinner } from "loadease-v2";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <LoaderSpinner color="#14AE88" size={40} speed={800} />
    </div>
  );
}

🔮 Vue 3

<template>
  <div>
    <h1>My Vue App</h1>
    <LoaderSpinner :color="'#14AE88'" :size="40" :speed="800" />
  </div>
</template>

<script>
import { LoaderSpinner } from "loadease-v2";

export default {
  components: { LoaderSpinner },
};
</script>

🧱 Laravel (Blade + JS)

<!-- resources/views/welcome.blade.php -->
<div id="app">
  <h1>Laravel Loader Example</h1>
  <div id="loader"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
<script>
  const loader = LoadEase.LoaderSpinner({
    color: "#14AE88",
    size: 40,
    speed: 1000,
  });

  document.getElementById("loader").appendChild(loader);
</script>

⚙️ Vanilla JavaScript (Raw Project)

<div id="loader-container"></div>

<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
<script>
  const loader = LoadEase.LoaderSpinner({
    color: "#3490dc",
    size: 50,
  });

  document.getElementById("loader-container").appendChild(loader);
</script>

🌈 Tailwind CSS Example

import { LoaderSpinner } from "loadease-v2";

export default function TailwindApp() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <LoaderSpinner color="#14AE88" size={60} />
    </div>
  );
}

🎨 Bootstrap Example

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div id="bootstrap-loader"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>
<script>
  const loader = LoadEase.LoaderSpinner({ color: "#0d6efd", size: 50 });
  document.getElementById("bootstrap-loader").appendChild(loader);
</script>

🧪 Axios/Fetch Loader Handling

With `fetch` API

import React, { useEffect, useState } from "react";
import { LoaderSpinner } from "loadease-v2";

function FetchExample() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? (
        <LoaderSpinner color="#14AE88" size={40} />
      ) : (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      )}
    </div>
  );
}

With axios

import React, { useEffect, useState } from "react";
import axios from "axios";
import { LoaderSpinner } from "loadease-v2";

function AxiosExample() {
  const [loading, setLoading] = useState(true);
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts/1").then(res => {
      setPost(res.data);
      setLoading(false);
    });
  }, []);

  return (
    <div>
      {loading ? <LoaderSpinner size={40} color="#14AE88" /> : <p>{post.title}</p>}
    </div>
  );
}

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

<script src="https://cdn.jsdelivr.net/npm/loadease-v2/dist/index.umd.js"></script>

<div id="loader"></div>
<script>
  const loader = LoadEase.LoaderSpinner({ color: "#14AE88", size: 50 });
  document.getElementById("loader").appendChild(loader);
</script>

🛡️ TypeScript Support (React)

import React, { useState } from "react";
import { LoaderSpinner } from "loadease-v2";

const TSComponent: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(true);

  return (
    <div>
      {loading ? (
        <LoaderSpinner size={40} color="#14AE88" speed={1000} />
      ) : (
        <p>Loaded!</p>
      )}
    </div>
  );
};

export default TSComponent;

📦 Installation

Install using npm or yarn:

npm install loadease-v2
# or
yarn add loadease-v2

loadease-v2