A simple and minimalistic, VanillaJS, standalone, pages transition loader, minified in a 1.31 kilobytes, one-line of code.
- 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.onloadself 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!