# jquery.preloadinator

> A super-lightweight preloader plugin, powered by jQuery & CSS

Latest version **1.0.1** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery.preloadinator
pnpm add jquery.preloadinator
yarn add jquery.preloadinator
bun add jquery.preloadinator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-09-24 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | akbarbuneri |
| Maintainers | akbarbuneri2 |
| Keywords | preloader |

## Links

- npm: https://www.npmjs.com/package/jquery.preloadinator
- Repository: https://github.com/akbarbuneri/Preloadinator
- Homepage: https://github.com/akbarbuneri/Preloadinator#readme
- Issues: https://github.com/akbarbuneri/Preloadinator/issues
- npm.io page: https://npm.io/package/jquery.preloadinator

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) ^3.6.0

## Recent versions

- 1.0.1 (latest) — 2021-09-24
- 1.0.0 — 2021-09-24

## README

# preloadinator
A super-lightweight preloader plugin, powered by jQuery & CSS :zap:


## Dependencies
Preloadinator requires the dependencies listed below.

- [jQuery](https://jquery.com/)

## Quickstart

1. Write HTML markup for your preloader

```html
<div class="preloader js-preloader">
</div>
```

2. Write CSS styling for the preloader & include this into your HTML file

```css
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #60D7A9;
}
```

3. Add jQuery & preloadinator.min.js right before your closing ```<body>``` tag

```html
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="dist/jquery.preloadinator.min.js"
```

4. Initialise your preloader & include this into your HTML file

```javascript
$('.js-preloader').preloadinator();
```

5. Kick back & relax :beer:

## Options

| Option            | Type     | Default | Description                                                     |
|-------------------|----------|---------|-----------------------------------------------------------------|
| scroll            | boolean  | false   | Enable/disable scrolling when the preloader is displayed        |
| minTime           | integer  | 0       | Minimum amount of time to display preloader (in milliseconds)   |
| animation         | function | fadeOut | Animation used to remove the preloader when the page has loaded |
| animationDuration | integer  | 400     | Duration of animation (in milliseconds)                         |

Use the options above like so:

```javascript
$('.js-preloader').preloadinator({
	scroll: false,
	minTime: 2000,
	animation: slideUp,
	animationDuration: 600
});
```

## Callbacks

| Callback             | Description                                                                           |
|----------------------|---------------------------------------------------------------------------------------|
| afterDisableScroll   | This callback is fired after scrolling is disabled (if scroll option is set to false) |
| afterEnableScroll    | This callback is fired after scrolling is enabled (if scroll option is set to false)  |
| afterRemovePreloader | This callback is fired after the preloader is removed from the view                   | 

Use the callbacks above like so:

```javascript
$('.js-preloader').preloadinator({
	afterDisableScroll: function() {
		alert('Scrolling has just been disabled.');
	},
	afterEnableScroll: function() {
		alert('Scrolling has just been enabled.');
	},
	afterRemovePreloader: function() {
		alert('The preloader has just been removed.');
	}
});
```                  



Happy coding! 🤖

&mdash; akbarbuneri

---
_Source: https://npm.io/package/jquery.preloadinator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._