loading converted to alpine.js
This commit is contained in:
@ -1,4 +1,9 @@
|
||||
<div data-loading-menu class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
|
||||
<div
|
||||
x-data="{ }"
|
||||
x-init="setTimeout(() => $refs.loadingMenu.remove(), 1000)"
|
||||
x-ref="loadingMenu"
|
||||
class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
|
||||
>
|
||||
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
|
||||
<div class="flex flex-col items-center justify-center mb-7 cursor-pointer">
|
||||
<span class="w-7 h-7 flex items-center justify-center text-2xl">
|
||||
@ -73,32 +78,3 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@push('scripts_start')
|
||||
<script type="text/javascript">
|
||||
let loading_menu_html = document.querySelectorAll('[data-loading-menu]');
|
||||
let loading_html = document.querySelectorAll('[data-loading-content]');
|
||||
let loading_absolute_html = document.querySelectorAll('[data-absolute-loading-content]');
|
||||
let menu_html = document.querySelector('[data-real-menu]');
|
||||
let timer = 1000;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
setTimeout(() => {
|
||||
loading_menu_html[0].remove();
|
||||
menu_html.classList.remove('hidden');
|
||||
}, timer);
|
||||
|
||||
if (loading_html.length) {
|
||||
setTimeout(() => {
|
||||
loading_html[0].remove();
|
||||
}, timer);
|
||||
}
|
||||
|
||||
if (loading_absolute_html.length) {
|
||||
setTimeout(() => {
|
||||
loading_absolute_html[0].remove();
|
||||
}, timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
Reference in New Issue
Block a user