https://github.com/muhdfaiz/js-loading-overlay

Display loading overlay/spinner for your application easily and beautifully.
https://github.com/muhdfaiz/js-loading-overlay

ajax javascript loading-spinner overlay overlay-window spinner

Last synced: 2 months ago
JSON representation

Display loading overlay/spinner for your application easily and beautifully.

• Host: GitHub
• URL: https://github.com/muhdfaiz/js-loading-overlay
• Owner: muhdfaiz
• License: other
• Created: 2019-10-11T09:02:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T15:07:41.000Z (about 3 years ago)
• Last Synced: 2025-08-09T09:05:54.347Z (8 months ago)
• Topics: ajax, javascript, loading-spinner, overlay, overlay-window, spinner
• Language: JavaScript
• Homepage:
• Size: 729 KB
• Stars: 28
• Watchers: 1
• Forks: 11
• Open Issues: 10
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
## JS Loading Overlay

[![Build Status](https://img.shields.io/github/workflow/status/muhdfaiz/js-loading-overlay/JS%20Loading%20overlay)](https://github.com/muhdfaiz/js-loading-overlay/actions?query=branch%3Amaster)

[![Coverage Status](https://coveralls.io/repos/github/muhdfaiz/js-loading-overlay/badge.svg?branch=master)](https://coveralls.io/github/muhdfaiz/js-loading-overlay?branch=master)

[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/muhdfaiz/js-loading-overlay/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/muhdfaiz/js-loading-overlay/?branch=master) 

![Downloads](https://img.shields.io/npm/dt/js-loading-overlay)

[![Version](https://img.shields.io/npm/v/js-loading-overlay)](https://www.npmjs.com/package/js-loading-overlay)

![Size](https://img.shields.io/bundlephobia/min/js-loading-overlay)

Display loading overlay easily and beautifully in your application. JS loading overlay using awesome spinner from [Load Awesome](https://github.danielcardoso.net/load-awesome/animations.html). It contains 52 spinner you can choose.

## Features

- **Full page loading overlay.** Able to show full page loading overlay. 

- **Loading overlay inside container.** Able to display the loading overlay inside the container

- **Lock scroll.** Able to lock the scroll during loading overlay active.

## Documentation

For detail of installation instructions, in-depth usage, please take a look at the [documentation](https://js-loading-overlay.muhdfaiz.com/).

### How To Install

```markdown

NPM

npm install --save js-loading-overlay

Yarn

yarn add js-loading-overlay

Use without NPM or Yarn

import 'js-loading-overlay'

JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'});

```

### How To Use

```markdown

import 'js-loading-overlay'

JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'});

or

JsLoadingOverlay.show({'spinnerIcon': 'triangle-skew-spin'});

```

### Show loading overlay with default options

```markdown

JsLoadingOverlay.show();

```

### Show loading overlay with custom options

```markdown

JsLoadingOverlay.show({

  'overlayBackgroundColor': '#666666',

  'overlayOpacity': 0.6,

  'spinnerIcon': 'ball-atom',

  'spinnerColor': '#000',

  'spinnerSize': '2x',

  'overlayIDName': 'overlay',

  'spinnerIDName': 'spinner',

  'spinnerZIndex':99999,

  'overlayZIndex':99998

});

```

### Hide Loading Overlay

```markdown

JsLoadingOverlay.hide();

```

### Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

## Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.