bukacekd/loader

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

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.