<?php require_once 'ajax.php'; ?> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> <style> #loading-screen { position: absolute; z-index: 2; /*top: 0; */ left: 0; width: 100%; height: 100%; opacity: 1; transition: 1s opacity; } #loading-screen.fade-out { opacity: 0; } .loader { display: block; position: relative; left: 50%; top: 50%; width: 40vh; height: 40vh; margin: -20vh 0 0 -20vh; border-radius: 50%; border: 3px solid transparent; border-top-color: #9370DB; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #BA55D3; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } .loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FF00FF; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } </style> <div id="loading-screen"> <div class="loader"></div> </div> <script src="assets/map/script_map3d.js" type="module"></script>