https://github.com/manzdev/pageload

Small and agnostic javascript library for easy page loading spinner. Ready for ES Modules.
https://github.com/manzdev/pageload

animation esm html javascript js load loading page spinner

Last synced: 3 months ago
JSON representation

Small and agnostic javascript library for easy page loading spinner. Ready for ES Modules.

• Host: GitHub
• URL: https://github.com/manzdev/pageload
• Owner: ManzDev
• Created: 2019-12-29T17:33:35.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-07T15:30:21.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T04:09:33.582Z (3 months ago)
• Topics: animation, esm, html, javascript, js, load, loading, page, spinner
• Language: JavaScript
• Homepage: https://manzdev.github.io/pageload/
• Size: 716 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PageLoad.js

![npm](https://img.shields.io/npm/v/@manz/pageload)

![GitHub file size in bytes](https://img.shields.io/github/size/manzdev/pageload/lib/pageload.min.js)

![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/@manz/pageload)

Small vanilla javascript library 3.5KB (~1.4KB gzipped) for easy and simple page loading spinner.

Ready for ES Modules. Agnostic. **Zero dependencies**.

## Basic Usage

### 1. Vía NPM

```bash

npm install @manz/pageload

```

```js

import PageLoad from "@manz/pageload";

PageLoad.start({ fakeMode: true });

```

### 2. Vía CDN

```html

  import PageLoad from "//unpkg.com/@manz/pageload";

  PageLoad.start({ fakeMode: true });

```

- `fakeMode` mode run a slow progress bar

## Custom Usage

### FadeIn until completed

```js

import PageLoad from "//unpkg.com/@manz/pageload";

PageLoad.start({

  autoIncrement: true,

  color: "mediumpurple",

  fadeIn: true

});

```

### Progress bar on dark mode

```js

import PageLoad from "//unpkg.com/@manz/pageload";

document.body.style.backgroundColor = "black";

PageLoad.start({

  fakeMode: true,

  backgroundColor: "#222",

  color: "#c00",

  spinBarColor: "#ccc",

  enableProgress: true

});

```

More info about [pageload](https://manzdev.github.io/pageload) and [options](https://manzdev.github.io/pageload/#options).