npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@qoenutdevs/loading-screen

v1.0.1

Published

Premium animated loading screen built with Web Components and GSAP.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

qoenutdevsqoenutdevs

Keywords

loadingloaderspinnerwebcomponentgsapanimationbaccaratdashboard

Readme

Ini sangat layak dijadikan package npm. Saya justru menyarankan jangan hanya export satu file index.js, tapi buat package yang rapi sehingga nanti bisa berkembang (misalnya nanti ada theme, mode baru, plugin, dsb).

Saya menyarankan struktur seperti ini.

@qoenutdevs/loading-screen
│
├── src/
│   ├── PremiumLoader.js
│   ├── styles/
│   └── assets/
│
├── dist/
│
├── demo/
│   ├── index.html
│   └── vite.config.js
│
├── package.json
├── README.md
├── LICENSE
├── index.js
└── .github/
    └── workflows/
        publish.yml

index.js

Yang diexport cukup ini.

import "./src/PremiumLoader.js";

export { PremiumLoader } from "./src/PremiumLoader.js";

Jadi ketika user menginstall package

npm i @qoenutdevs/loading-screen

cukup

import "@qoenutdevs/loading-screen";

Custom element langsung ter-register.

atau

import { PremiumLoader } from "@qoenutdevs/loading-screen";

package.json

Saya akan ubah menjadi seperti ini.

{
  "name": "@qoenutdevs/loading-screen",
  "version": "1.0.0",
  "description": "Premium animated loading screen built with Web Components and GSAP.",
  "type": "module",
  "main": "index.js",
  "module": "index.js",
  "exports": {
    ".": "./index.js"
  },
  "files": [
    "src",
    "index.js",
    "README.md",
    "LICENSE"
  ],
  "keywords": [
    "loading",
    "loader",
    "spinner",
    "webcomponent",
    "gsap",
    "animation",
    "baccarat",
    "dashboard"
  ],
  "peerDependencies": {
    "gsap": "^3.13.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mkurniarmadhan/loading-screen.git"
  },
  "license": "MIT"
}

Saya sengaja menjadikan gsap sebagai peerDependency supaya tidak bentrok dengan GSAP milik aplikasi pengguna.

README.md

Ini yang menurut saya akan membuat package-mu terlihat profesional.

@qoenutdevs/loading-screen

Premium animated loading screen built using Web Components and GSAP.

Perfect for

  • Dashboard
  • Admin Panel
  • SaaS
  • Casino
  • Baccarat
  • Game Lobby
  • Landing Page

Installation

npm install @qoenutdevs/loading-screen gsap

Import

import "@qoenutdevs/loading-screen";

Basic Usage

<premium-loader></premium-loader>

SaaS Mode

<premium-loader
    mode="saas"
    duration="4"
    subtitle="Preparing Dashboard..."
></premium-loader>

Baccarat Mode

<premium-loader
    mode="baccarat"
    duration="5"
    subtitle="Dealer Ready"
></premium-loader>

Logo

<premium-loader
    logo-icon="/logo-icon.png"
    logo-text="/logo-text.png"
></premium-loader>

Hide Spinner

<premium-loader
    show-spinner="false"
></premium-loader>

Hide Progress

<premium-loader
    show-progress="false"
></premium-loader>

Custom Logo Size

<premium-loader
    logo-icon-height="80px"
    logo-text-height="50px"
></premium-loader>

Available Attributes

| Attribute | Default | Description | | ---------------- | --------------------------- | ------------------ | | mode | saas | saas / baccarat | | duration | 4 | animation duration | | subtitle | Preparing your dashboard... | loading text | | logo-icon | - | icon image | | logo-text | - | text logo | | logo-icon-height | 64px | logo icon height | | logo-text-height | 38px | logo text height | | show-spinner | true | show spinner | | show-progress | true | show progress |

Events

The component emits an event when loading has finished.

window.addEventListener("premiumLoaderComplete", () => {
    console.log("Loading Finished");
});

Remove Programmatically

document.querySelector("premium-loader")?.remove();

Framework Support

✅ HTML

✅ Laravel

✅ Livewire

✅ Vue

✅ React

✅ Vite

✅ NextJS

✅ Nuxt

Example

<body>

<premium-loader
    mode="baccarat"
    logo-icon="/logo.png"
    logo-text="/brand.png"
    duration="6"
    subtitle="Loading Table..."
></premium-loader>

</body>

Menurut saya masih bisa dibuat jauh lebih keren

Kalau kita mau menjadikan ini sebagai package open source yang benar-benar premium, saya akan melakukan refactor menjadi sekitar 1.500–2.000 baris dengan fitur-fitur seperti:

  • 🎨 Theme System (light, dark, glass, casino, neon)
  • 🎰 Banyak mode (saas, baccarat, slots, roulette, poker)
  • 🖼️ Asset loader bawaan (preload gambar/font)
  • 📦 API JavaScript (PremiumLoader.show(), PremiumLoader.hide(), PremiumLoader.update())
  • 📱 Responsif dan mobile-first
  • 🧩 Dukungan plugin untuk animasi tambahan
  • 🛠️ TypeScript (index.d.ts)
  • 📚 Demo interaktif dengan Vite dan Storybook
  • 🌐 Dokumentasi lengkap dan playground online

Dengan fondasi seperti itu, @qoenutdevs/loading-screen tidak hanya menjadi komponen loading sederhana, tetapi bisa berkembang menjadi library loading screen yang siap dipakai di berbagai framework dan proyek profesional. Saya rasa ini akan menjadi langkah yang bagus untuk membangun ekosistem package @qoenutdevs.