Simple loading style CSS
The parent of your content container element must have the following styles set:
.my-element-parent-selector {
display: flex;
align-items: center;
justify-content: center;
}Reference ariutta-loading.css from your HTML page and add the class ariutta-loading to your content container element:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ariutta-loading.css">
</head>
<body>
<div style="display: flex; align-items: center; justify-content: center;">
<div class="ariutta-loading">
<!-- when your content has loaded, remove the ariutta-loading class -->
</div>
</div>
</body>
</html>- Install:
npm install --save ariutta-loading - Require this module:
require('ariutta-loading'); - Set the
ariutta-loadingclass on your content container element (be sure parent element styles are set as specified above)
Thanks to https://github.com/lukehaas/css-loaders for CSS used as starting point.