ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/preloader.php |
<?php
/**
* Partial: layar pemuatan (preloader) bertema digital.
* Disertakan tepat setelah <body>. Memakai CSS inline agar tampil tanpa menunggu Tailwind.
* Otomatis hilang saat halaman siap (window.load) dengan batas aman 5 detik.
*/
?>
<div id="ppidLoader" role="status" aria-label="Memuat">
<div class="pl-core">
<span class="pl-ring"></span>
<span class="pl-ring pl-ring2"></span>
<span class="pl-logo"><img src="<?= e(asset('logomateng.webp')) ?>" alt="" width="42" height="42"></span>
</div>
<div class="pl-brand">PPID Kabupaten Mamuju Tengah</div>
<div class="pl-sub">Memuat portal layanan informasi…</div>
<div class="pl-bar"><span></span></div>
</div>
<style>
#ppidLoader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
background:radial-gradient(circle at 50% 38%, #16233f 0%, #0b1120 72%);color:#e2e8f0;
font-family:Inter,system-ui,-apple-system,sans-serif;transition:opacity .5s ease, visibility .5s ease;}
#ppidLoader.pl-hide{opacity:0;visibility:hidden;}
#ppidLoader .pl-core{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center;}
#ppidLoader .pl-ring{position:absolute;inset:0;border-radius:50%;
background:conic-gradient(from 0deg,#0ea5e9,#22d3ee,#15803d,#0ea5e9);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
animation:pl-spin 1.1s linear infinite;}
#ppidLoader .pl-ring2{inset:12px;opacity:.5;animation-duration:1.7s;animation-direction:reverse;}
#ppidLoader .pl-logo{position:relative;width:64px;height:64px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(14,165,233,.28);}
#ppidLoader .pl-logo img{width:42px;height:auto;display:block;}
#ppidLoader .pl-brand{font-weight:700;font-size:15px;letter-spacing:.01em;color:#f1f5f9;}
#ppidLoader .pl-sub{font-size:12px;color:#8394ae;margin-top:-6px;}
#ppidLoader .pl-bar{width:190px;height:3px;border-radius:3px;background:rgba(148,163,184,.2);overflow:hidden;}
#ppidLoader .pl-bar span{display:block;height:100%;width:38%;border-radius:3px;background:linear-gradient(90deg,#0ea5e9,#22d3ee);animation:pl-load 1.2s ease-in-out infinite;}
@keyframes pl-spin{to{transform:rotate(360deg);}}
@keyframes pl-load{0%{transform:translateX(-130%);}100%{transform:translateX(330%);}}
@media (prefers-reduced-motion: reduce){#ppidLoader .pl-ring,#ppidLoader .pl-bar span{animation:none;}}
</style>
<script>
(function () {
var el = document.getElementById('ppidLoader');
if (!el) return;
var done = false;
function hide() {
if (done) return; done = true;
el.classList.add('pl-hide');
setTimeout(function () { if (el && el.parentNode) el.parentNode.removeChild(el); }, 600);
}
if (document.readyState === 'complete') { setTimeout(hide, 250); }
else { window.addEventListener('load', function () { setTimeout(hide, 250); }); }
setTimeout(hide, 5000); // batas aman agar tidak macet
})();
</script>
Kontol Shell Bypass