The loading function is a utility function exported by the @ymlluo/bs5dialog package. It creates a loading element and appends it to the target element. The function returns an object with the target element, loading element, and hide and clean functions.
import { loading } from '@ymlluo/bs5dialog';
const targetElement = document.getElementById('my-element');
const options = {
animation: 'border',
animationClass: 'text-warning',
animationStyle: '',
text: 'Please wait...',
type: '',
backdrop: true,
timeout: 2000
};
const { hide } = loading(targetElement, options);
// To hide the loading:
hide();
const { loading } = require('@ymlluo/bs5dialog');
const targetElement = document.getElementById('my-element');
const options = {
animation: 'border',
animationClass: 'text-warning',
animationStyle: '',
text: 'Please wait...',
type: '',
backdrop: true,
timeout: 2000
};
const { hide } = loading(targetElement, options);
// To hide the loading:
hide();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Spinner Example</title>
<!-- Include Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bs5dialog.css" />
<script src="../bs5dialog.js"></script>
</head>
<body>
<div class="container">
<h1>Spinner Example</h1>
<div id="targetElement" style="width: 200px; height: 200px; border: 1px solid #666; margin: 20px 0"></div>
<button id="my-button" class="btn btn-primary">Click me</button>
</div>
<script>
const myButton = document.querySelector("#my-button");
const targetElement = document.querySelector("#targetElement");
const options = {
animation: "border",
animationClass: "text-warning",
animationStyle: "",
text: "Please wait...",
type: "",
backdrop: true,
timeout: 2000
};
myButton.addEventListener("click", () => {
bs5dialog.loading(targetElement, options);
});
</script>
</body>
</html>
The loading function takes two parameters: