RockLoaders Module

The RockLoaders module is a ProcessWire module designed to easily add animated loading animations/spinners to your website.

Dots animation:

RockLoaders - RockLoaders Module

Mail animation:

RockLoaders - RockLoaders Module

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.

On this page