n/qrazybox
1
0
Fork 0
mirror of https://github.com/Merricx/qrazybox.git synced 2025-04-19 17:49:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add preloader animation when loading the page content

Browse source
This commit is contained in:
Merricx 2017-05-11 23:34:01 +07:00
parent 77ee5f546d
commit 14858360c6
3 changed files with 47 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
css/style.css
View file

@ -852,6 +852,37 @@ noscript div h4 {
overflow: auto;
}
.loader {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999999999;
background-color: #4fc3f7;
text-align: center;
}
.loader div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.loader div img.logo {
width: 128px;
height: auto;
}
.loader div img.animated {
width: 64px;
height: auto;
}
.loader div h3 {
margin-top: 15px;
}
@media screen and (max-width: 900px) {
#box-mode {

15
index.html
View file

@ -10,6 +10,16 @@
<body>
<!-- START LOADER OVERLAY -->
<div class="loader">
<div>
<img src="img/icon.png" class="logo">
<br><br><br>
<img src="img/preloader.gif" class="animated">
</div>
</div>
<!-- END LOADER OVERLAY -->
<!-- START HEADER MENU -->
<div class="header noselect">
<div class="left">
@ -518,6 +528,11 @@
<script type="text/javascript" src="js/jsqrcode/alignpat.js"></script>
<script type="text/javascript" src="js/jsqrcode/databr.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".loader").delay(1000).fadeOut();
})
</script>
<!-- END LOAD JAVASCRIPT -->
<!-- START NOSCRIPT TAG -->

2
js/main.js
View file

@ -1,5 +1,5 @@
var VERSION = '0.1.7';
var VERSION = '0.1.10';
var qr_version = 1;
var qr_pixel_size = 15;