RockLoaders Module
The RockLoaders
module is a ProcessWire module designed to easily add animated loading animations/spinners to your website.
Dots animation:
Mail animation:
Adding Loaders
To add a new loader, use the add
method and pass an array of loader configurations:
// site/ready.php
rockloaders()->add([
'name' => 'path/to/loader',
]);
The path should be relative to the PW root folder!
Example
Let's say you want to add a loder from https://cssloaders.github.io/
Click on the loader and copy the CSS, then place it in /site/templates/loaders/my-loader.less|html
.
Then tell RockLoaders to load it:
// site/ready.php
rockloaders()->add([
'my-loader' => 'site/templates/loaders',
]);
Note that the array key must match the filename of the loader.
Now you can add the rockloader
attribute to your body tag to show the loader:
<body rockloader="my-loader">
<!-- your content -->
</body>
Usually you'd do this via JavaScript, but for testing you can add it manually as well.
Short Syntax
This module ships with several common loaders. They are placed in the loaders
folder of the module. For these loadersyou can use the short syntax by just passing the loader name:
// site/ready.php
rockloaders()->add('email');
Showing a Loader
To show a loader, all you need to do is add the rockloader
attribute to the body tag of your page:
<body rockloader="email">
<!-- your content -->
</body>
Usually you'd do this via JavaScript:
document.body.setAttribute('rockloader', 'email');
setTimeout(() => {
document.body.removeAttribute('rockloader');
}, 2000);
Troubleshooting
If anything does not work as expected, check the file /site/assets/rockloaders.min.css
. This is the CSS generated by this module and it should contain the CSS for all added loaders.
If that file is not correct, please delete it and reload your page. This should trigger a recompile of the file.