im using Leaflet.js on my HTML Page and also i have a navigation bar on the Leaflet map page.
as the leaflet library loads too late , i want to add a prelaoder on my HTML Page but everytime when i try to add any preloader , the preloader only apears on my navigation bar
can you guys please help me?
here's the code :
<!DOCTYPE html>
<html style="height: 100%; margin:0;">
<head>
<title> METAFARM WORLD </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/loader1.css">
<link rel="stylesheet" href="scripts/leaflet/leaflet.css">
<script src="scripts/leaflet/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis-v1/dist/moralis.js"></script>
<script
src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.6.2/web3-provider.min.js"></script>
</script>
<script src="js/main.js"></script>
</head>
<body style="height: 100%; margin: 0;">
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div dir="rtl" style="display:flex;justify-content:flex-end;padding:0.3em;background-color:rgb(4, 24, 54);color:rgb(33, 191, 150);align-items:center">
<button style="margin-right: 1rem;width:7rem;color:rgb(33, 191, 150);cursor:pointer;height:2rem;margin-left:1rem" id="btn-logout">Logout</button>
<button style="width:7rem;color:rgb(33, 191, 150);cursor:pointer;height:2rem;margin-left:1rem" id="btn-login">Authenticate</button>
<button
onclick="window.open('https://mfarmgame.com/index.php/ico/metafarm-initial-coin-offering/')"
style="margin-left:1rem;background-color:#1890ff;color:white; height:2rem;border:0;cursor:pointer;width:7rem;border-radius:0.2em"
>
Presale
</button>
<button
onclick="window.open('https://marketplace.mfarmgame.com')"
style="margin-left:1rem;background-color:#1890ff;color:white; height:2rem;border:0;cursor:pointer;width:7rem;border-radius:0.2em"
>
Marketplace
</button>
<button
onclick="window.open('https://mfarmgame.com')"
style="margin-left:1rem;background-color:#1890ff;color:white; height:2rem;border:0;cursor:pointer;width:7rem;border-radius:0.2em"
>
Home
</button>
<div
style="padding:1em;border:1px solid black;border-radius:1em;background-color:rgb(51, 102, 102);margin-left:0.4rem"
id="div-wallet"
>
</div>
<a style="margin-left:0.4rem" href="https://mfarmgame.com">
<svg width="60" height="60" viewBox="0 0 183.33 183.33" fill="none" xmlns="http://www.w3.org/1999/xlink"><polygon points="151.9,156.28 121.26,168.97 90.63,181.67 59.99,168.97 29.35,156.28 16.67,125.65 3.97,95.01 16.67,64.37 29.35,33.74 59.99,21.05 90.63,8.36 121.26,21.05 151.9,33.74 164.59,64.37 177.28,95.01 164.59,125.65 " fill="#009933"></polygon><polygon points="99.77,95.35 127.53,150.76 125.26,154.57 119.98,154.57 91.41,110.76 66.51,153.91 55.97,153.91 51.41,146.27 19.88,94.7 40.7,61.91 45.17,71.79 37.7,94.82 60.5,130.67 81.48,94.68 53.72,39.27 56,35.45 61.27,35.45 90.87,77.89 114.74,36.12 125.28,36.12 129.84,43.75 161.38,95.33 140.55,128.11 136.09,118.24 143.55,95.2 120.75,59.35 " fill="#ffffff"></polygon></svg>
</a>
</div>
<div id="map" style="width: 100%; height: 100%; background: #003333; margin: 0;"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
//initApp is getting called at end of file
async function initApp() {
// Declare Map Objects
var map = L.map('map').setView([0, 0], 2);
//Refrence the tiles
L.tileLayer('maps/16x162/{z}/{x}/{y}.png', {
minZoom: 2,
maxZoom: 6,
continuousWorld: false,
noWrap: true,
}).addTo(map);
//Load inventory
let MY_INVENTORY = await loadInventory();
//Start creating tiles
// LANDS Objects
//a1------------------------------------------------------------
var bounds = [[43.100983, 1.757813], [40.446947, -1.801758]];
var rect1 = L.rectangle(
bounds,
{
color: calculateColor(getInventoryItemById(MY_INVENTORY, 1 )),
weight: 1.5
}
).addTo(map);
var popup1 = metadataToPopup(getInventoryItemById(MY_INVENTORY, 1 ));
rect1.bindPopup(popup1);
//a2 ------------------------------------------------------------
var bounds = [[48.04871, 1.757813], [43.100983, -5.405273]];
var rect2 = L.rectangle(
bounds,
{
color: calculateColor(getInventoryItemById(MY_INVENTORY,2)),
weight: 1.5
}
).addTo(map);
var popup2 = metadataToPopup(getInventoryItemById(MY_INVENTORY,2));
rect2.bindPopup(popup2);
}
initApp();
</body>
</html>
CSS :
@import url('https://fonts.googleapis.com/css?family=Lato|ZCOOL+KuaiLe&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 1.6;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
.main {
text-align: center;
width: 90%;
opacity: 0;
display: none;
transition: opacity 1s ease-in;
}
.main h1 {
font-size: 50px;
margin-bottom: 10px;
}
.main p {
font-size: 25px;
color: #333;
}
.btn {
display: inline-block;
background: purple;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 15px;
}
.btn:hover {
opacity: 0.9;
}
/* LOADER 1 */
.loader {
height: 50px;
transform-origin: bottom center;
animation: rotate 3s linear infinite;
}
.circle {
display: inline-block;
background-color: purple;
height: 40px;
width: 40px;
border-radius: 50%;
transform: scale(0);
animation: grow 1.5s linear infinite;
margin: -10px;
}
.circle:nth-child(2) {
background-color: palevioletred;
animation-delay: 0.75s;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes grow {
50% {
transform: scale(1);
}
}
JS :
const loader = document.querySelector('.loader');
const main = document.querySelector('.main');
function init() {
setTimeout(() => {
loader.style.opacity = 0;
loader.style.display = 'none';
main.style.display = 'block';
setTimeout(() => (main.style.opacity = 1), 50);
}, 1000);
}
init();
can anyone help me ?
thanks