Show Loading Icon while loading page
| File | Folder Link |
|---|---|
| backend.php | \\SYNAS\Allan\DOCUMENTATION\Component\Loading Icon (For Page)\rckuc\wolf\app\layouts |
| style.css | \\SYNAS\Allan\DOCUMENTATION\Component\Loading Icon (For Page)\rckuc\wolf\admin\themes\black_and_white |
| backend.js | \\SYNAS\Allan\DOCUMENTATION\Component\Loading Icon (For Page)\rckuc\wolf\admin\javascript |
Update: backend.php
Insert loader above <div id="contents">
<div id="load">
<div class="loader"></div>
</div>
<div id="contents"> <!-- insert #load above here -->
<div id="load">
<div class="loader"></div>
</div>
<div id="contents"> <!-- insert #load above here -->Update: style.css
#load{
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
z-index:9999;
}
.loader {
border: 5px solid #e5e5e5;
animation: spin .5s linear infinite;
border-top: 5px solid black;
border-left: 5px solid black;
border-radius: 50%;
width: 50px;
height: 50px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#load{
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
z-index:9999;
}
.loader {
border: 5px solid #e5e5e5;
animation: spin .5s linear infinite;
border-top: 5px solid black;
border-left: 5px solid black;
border-radius: 50%;
width: 50px;
height: 50px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Update: backend.js
$(document).ready(function () {
$('#contents').hide();
});
$(window).on('load', function () {
setTimeout(function () {
$('#load').hide();
$('#contents').fadeIn(100);
}, 300);
});
$(document).ready(function () {
$('#contents').hide();
});
$(window).on('load', function () {
setTimeout(function () {
$('#load').hide();
$('#contents').fadeIn(100);
}, 300);
});