Vanilla JS Pages Transition Loader

A simple and minimalistic, VanillaJS, standalone, pages transition loader, minified in a 1.31 kilobytes, one-line of code.

Fundamentals

Generate a <script> element appended to the <head> element, containing any required styling.
Generate a <div> element, acting as overlay, prepended to the <body> element.
Generate a <svg> element, acting as loader, prepended to the previously generated <div> element.
On window.onload self generated elements are automatically removed.

to enable it, place the following script near the end of your pages, right before the closing </body> tag.

<script type="application/javascript" src="../path/to/vanilla-js-pages-transition-loader.min.js"></script>

let settings = {
    backgroundColor: "#2774ab",
    filterBrightness: 2,
    strokeWidth: 10,
    timeOnScreen: 100
}, //...

Option	Description
`backgroundColor`	Refer to MDN Web Docs color for acceptable values. The background-color CSS property sets the background color of an element. Default to Wordpress deep blue accent `#2774ab`
`filterBrightness`	number or percentage. The brightness of the `svg` loader element (brightness() CSS function). A value under `100%` darkens the loader, while a value over `100%` brightens it. The lacuna value for interpolation is `1`. Default to `2`.
`strokeWidth`	Positive `integer`. Loader stroke's width. The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. Default to `10`.
`timeOnScreen`	Positive `integer`. The time on screen is appended to the page loading time. Default to `100` milliseconds.

We made your day? Give us a star!