You can use tools included in the Barebones theme to display loading animations, which are especially useful while AJAX functions are being performed. This article demonstrates how to use loading animations.

Loading animations are displayed with the default theme's loaders.js plugin.

The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts} tag.

The default theme includes jQuery by default.

The plugin can be found in the default theme's file /scripts/plugins/loaders.js.

The loader design can be defined in the file /styles/scss/modules/_loaders.scss and its HTML markup in the plugin's JavaScript file.

A loader covers the element that is being loaded with an overlay element. Once the relevant action has been completed, the overlay can be removed from the element.

For example, if you modify the shopping cart's content by using the cart.js plugin, you may want to use a loading animation during AJAX calls:

MCF.Cart.init({
	beforeAddProduct: function ($buyForm) {
		MCF.Loaders.show($(".MiniCart"));
	},
	afterAddProduct: function ($buyForm) {
		MCF.Cart.updateCart($(".MiniCart"));
		MCF.Loaders.hide($(".MiniCart"));
	}
});

In the example, an overlay is placed over the shopping cart's preview before a product is added to the shopping cart by using the plugin's show() function. After the product has been added, the shopping cart's contents are updated and the overlay removed by using the hide() function.