web-mask-layer

English

简体中文

English

简体中文

Appearance

web-mask-layerBrowser-side mask layer

A simple, lightweight and customizable web mask layer with plain JavaScript API. Supports singleton pattern, custom styles, and smooth animations.

Get Started
Try Demo

Plain JS API

Use the singleton instance from JavaScript or TypeScript in any browser-based project with zero framework dependency.

Lightweight

Pure vanilla DOM implementation without any runtime dependencies. Small bundle size, fast to load.

Customizable

Configure text, background, color, opacity, custom CSS class, and target element. Smooth enter/leave animations included.

Why this library ​

web-mask-layer is a simple and direct mask layer for loading states in browser applications:

  • no runtime dependencies — pure vanilla DOM operations
  • singleton pattern for efficient memory usage
  • target any DOM element or the entire page body
  • custom styles and CSS classes for easy theming
  • smooth CSS animations for enter and leave transitions

Runtime notes ​

  • This is a pure browser-side library with no framework dependency.
  • It can be used in any browser-based project — Vue, React, Angular, or plain HTML.
  • In SSR applications, call createLoading() only on the client side.

Next steps ​

Released under the MIT License.

Copyright © xcy960815