diff --git a/css/style.css b/css/style.css
index 5c68b32..40e13e1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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 {
diff --git a/index.html b/index.html
index 030d240..e79bd06 100644
--- a/index.html
+++ b/index.html
@@ -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 -->
diff --git a/js/main.js b/js/main.js
index c2bb676..84a15e3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,5 @@
 
-var VERSION = '0.1.7';
+var VERSION = '0.1.10';
 
 var qr_version = 1;
 var qr_pixel_size = 15;
