Loading · Docs · gpu slider

import { loading } from 'gpuslider/plugins';
import 'gpuslider/loading.css';

createSlider( element, { plugins: [ loading() ] } );

The slider waits for its images and for the first picture of its videos, and shows a screen meanwhile: a number and a line. loading.css is its look, with --gs-loading-back and --gs-loading-color for its colours.

A screen of your own is an element with the class gs-loading in the slider, or any element of the page, given as screen. It is told how far the loading is, and what it makes of it is its own:

<div class="gs-loading">
	<img src="logo.svg" alt="">
	<span data-gs-loaded></span> %
</div>

`--gs-loaded`	On the screen: 0 to 1
`[data-gs-loaded]`	Elements in the screen whose text is the number, 0 to 100
`.gs-loaded`	The class of the screen when all is there. `loading.css` lets it fade
`.gs-is-loading`	The class of the slider meanwhile

Or no screen, screen: false, and the events:

createSlider( element, {
	plugins: [ loading( { screen: false } ) ],
	on: {
		'loading:start': ( { total } ) => {},
		'loading:progress': ( { loaded, failed, total, progress, media } ) => {},
		'loading:done': ( { loaded, failed, total, time, late } ) => {},
	},
} );

slider.plugins.loading has state (the same numbers), done, and ready: a promise that is kept when the loading is over.

Option	Default
`screen`		An element, or `false` for none
`min`	`0`	The least time the screen is shown, ms: no screen that is gone before it was seen
`timeout`	`10000`	After this time it is done with what is there, and `late` is true. `0`: it waits for ever
`also`	`[]`	Promises that are waited for and counted as the media: `document.fonts.ready`, data

Media that fail count as the others, and failed says how many: a picture that is missing does not keep the screen. Images with loading="lazy" are told to load at once, and videos to load their first picture, because a slider that waits for them would wait for ever; so loading() is for sliders at the top of a page, or for pages that are a slider.

Several sliders count together, with one screen, when they are given the same plugin:

const together = loading( { screen: document.querySelector( '.intro' ) } );
createSlider( one, { plugins: [ together ] } );
createSlider( two, { plugins: [ together ] } );

A screen that is in the HTML is there before the script is. Without the script it would stay: <noscript><style>.gs-loading { display: none }</style></noscript>.