Loader

A tiny dependency-free javascript loading spinner component with minimal configuration.

Live Demo: https://bukacekd.github.io/loader

Features

• easy to use
• modification of appearance using css styles
• possibility to add custom text
• simple configuration and api

Installation

Npm

npm install @js4y/loader

CDN

<script src="https://unpkg.com/@js4y/loader/dist/index.js"></script>

Usage

Npm

import {Loader} from '@js4y/loader';

new Loader(document.body);

CDN

<script src="https://unpkg.com/@js4y/loader/dist/index.js"></script>

<script>
    new js4y.components.Loader(document.body);
<script>

Configuration

The component offers a set of configuration items. Below is an overview of them.

new Loader(element: HTMLElement | string, {
    className?: string,
    content?: string,
    id?: string
});

className

required: false, type: string

CSS class of component.

new Loader(document.body, {
    className: 'my-loader',
});

content

required: false, type: string

The content that will be displayed.

new Loader(document.body, {
    content: 'please wait...',
});

id

required: false, type: string

CSS Identifier of component.

new Loader(document.body, {
    id: 'my-loader',
});

Methods

create(element, options): Loader

Creates the component, but without rendering it in the page.

const loader = Loader.create(document.body);

To render the component directly, use the constructor.

const loader = new Loader(document.body);

open(delay?: number): Promise

Opens the component immediately or with a delay.

dialog.open();

close(delay?: number): Promise

Close the component immediately or with a delay.

dialog.close(2000);

Styling

The component contains basic isolated css styles via shadow dom. Nevertheless, the component can be richly decorated using common css rules and three css custom properties.

| CSS Custom properties | Description | | - | - | | --js4y-loader-duration | Duration of icon rotation. | | --js4y-loader-size | Size of the compontent. | | --js4y-loader-width | Stroke width of the icon. |

If the parent of the component is the body element, the component position become fixed, otherwise it remains static.

Example of component styling including basic values:

[data-loader] {
    --js4y-loader-duration: 3s;    /* default: 2s */
    --js4y-loader-size:  100px;    /* default: 40px */
    --js4y-loader-width: 20%;      /* default: 10% */

    backgroud-color: white;        /* default: transparent */
    color: green;                  /* default: currentColor */
    flex-direction: row;           /* default: column */
    font-size: 1.5em;              /* default: inherit */
    gap: 3em;                      /* default: 1em */
    position: absolute;            /* default: static */
    transition: opacity .5s;       /* default: opacity .2s */
    stroke: red;                   /* default: currentColor */
}

Browser support

| | | | | | | :-: | :-: | :-: | :-: | :-: | | Chrome 84+ | Edge 84+ | Firefox 75+ | Opera 70+ | Safari 13.1+ |

License

The project is licensed under MIT license.

Related

• CountUp - A tiny dependency-free JavaSript library for animating numeric values.
• Dialog - A tiny dependency-free JavaSript ES6 library built on a dialog element with minimal configuration.
• lockScroll - A set of methods to lock scrolling within an element or an entire page.