loading-sign

Loading animations that run on the front-end interface

在前端界面上运行的加载动画

🌰 Demo 示例

https://chenchengbi.github.io/loading-sign/

📦 Install 安装

$ npm i loading-sign

🔨 Usage 使用

import { Loading } from "loading-sign";

// Full screen display of Loading Sign
// 全屏显示加载状态
const unit = Loading.service({ body: true, fullscreen: true, lock: true });
setTimeout(() => { unit.close(); }, 2000);

🔠 Details 详细用法

// const spinner = document.createElement('div');
// spinner.style.backgroundColor = 'white';
// spinner.style.width = '32px';
// spinner.style.height = '32px';
// spinner.style.borderRadius = '20%';
// spinner.style.animation = 'spin 1s linear infinite';
// document.head.appendChild(document.createElement('style')).textContent = `
// @keyframes spin {
//     0% { transform: rotate(0deg); }
//     100% { transform: rotate(360deg); }
// }`;

/**
 * 创建一个“加载动画”实例
 * 以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例
 * 以服务的方式调用的非全屏 Loading 不是单例的：每次调用都会创建一个新的 Loading 实例；
 * 但是，若在同一个 DOM 节点上，前一个非全屏 Loading 关闭前再次调用非全屏 Loading，则会返回现有非全屏 Loading 的实例
 */
const unit = Loading.service({
    /**
     * 加载动画要覆盖的 DOM 节点或 DOM 选择器
     * DOM nodes or DOM selectors to be covered by the loading animations
     */
    target: '.specified-region',
    /**
     * 是否将加载动画添加到 body 上
     * Whether to add the loading animation to the body
     */
    body: false,
    /**
     * 是否全屏显示加载动画
     * Whether to display the loading animation in fullscreen
     */
    fullscreen: false,
    /**
     * 是否锁定背景滚动
     * Whether to lock the background scrolling
     */
    lock: false,
    /**
     * 加载中显示的文本
     * The text to be displayed during loading
     */
    text: '加载中...',
    /**
     * 自定义加载动画元素
     * Custom loading spinner element
     */
    // spinner: spinner,
    /**
     * 遮罩的背景颜色
     * Background color of the mask
     */
    background: 'rgba(0, 0, 0, 0.7)',
    /**
     * 自定义样式类名
     * Custom class name
     */
    customClass: 'my-loading',
    /**
     * 加载动画的尺寸
     * Size of the loading spinner
     */
    size: 42,
});

setTimeout(() => { unit.close(); }, 2000);