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

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

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

Npm

npm install @js4y/loader

CDN

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

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>

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
});

required: false, type: string

CSS class of component.

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

required: false, type: string

The content that will be displayed.

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

required: false, type: string

CSS Identifier of component.

new Loader(document.body, {
    id: 'my-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);

Opens the component immediately or with a delay.

dialog.open();

Close the component immediately or with a delay.

dialog.close(2000);

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.

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 */
}

Chrome 84+	Edge 84+	Firefox 75+	Opera 70+	Safari 13.1+

The project is licensed under MIT license.

• 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.