loadme
A simple way to display a loading screen for your web application.
Installation
NPM
First install loadme with
npm install @lca1512/loadme
Then link to loadme.min.js after the opening body tag.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="/node_modules/loadme.min.js"></script>
<h1>Content</h1>
</body>
</html>
CDN
Include <script src="https://unpkg.com/@lca1512/loadme/loadme.min.js"></script> after the opening body tag.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/@lca1512/loadme/loadme.min.js"></script>
<h1>Content</h1>
</body>
</html>
Usage
Call loadme.load() as soon as possible after linking to loadme.min.js.
loadme.load() takes an optional HEX Code as an argument which is used to define the background colour of the loading screen. If no HEX Code is passed then the loading screen background colour will default to light blue (#3498db).
When your application is loaded call loadme.loaded(); to fade the loading screen out.
Example
<!DOCTYPE html>
<html>
<head>
<title>loadme</title>
</head>
<body>
<!-- Link to loadme.min.js -->
<script type="text/javascript" src="https://unpkg.com/@lca1512/loadme/loadme.min.js"></script>
<script type="text/javascript">
// Call loadme.load(); with an optional HEX colour code as soon as possible after linking to loadme.min.js
loadme.load("#ff0098");
setTimeout(() => {
// After the application has loaded called loadme.loaded();
loadme.loaded();
}, 3000);
</script>
<h1>Loaded!</h1>
</body>
</html>