Update

accgit · accgit · commit 5ce199e00328 · 2018-10-12T12:28:16.000+02:00
diff --git a/src/css/style.css b/src/css/style.css
@@ -5,19 +5,46 @@ body {
     font-family: 'Open Sans', sans-serif;
 }
 
-/* nanobar
+/* website loader
    ========================================================================== */
-.nanobar {
-    height: 2px;
-    top: 0;
+#webloader {
+    background: #fff;
+    height: 100vh;
+    opacity: 1;
+    position: fixed;
+    visibility: visible;
+    transition: all 0.3s ease-in-out;
     width: 100%;
-    z-index: 9999;
+    z-index: 999;
 }
 
-.nanobar .bar {
-    background: #acacac;
-    height: 100%;
-    transition: height .3s;
-    width: 0;
+#webloader.out {
+    opacity: 0;
+    visibility: hidden;
 }
 
+#spinner {
+    width: 40px;
+    height: 40px;
+    margin: 100px auto;
+    background: #333;
+    position: relative;
+    top: 35%;
+    border-radius: 100%;
+    animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+    100% {
+	opacity: 0;
+    }
+}
+
+@keyframes sk-scaleout {
+    0% {
+	transform: scale(0);
+    } 100% {
+	transform: scale(1.0);
+	opacity: 0;
+    }
+}
diff --git a/src/index.html b/src/index.html
@@ -29,6 +29,11 @@
 	<link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+	<!-- website loader -->
+	<div id="webloader">
+		<div id="spinner"></div>
+	</div>
+
 	<!-- navigation -->
 	<div class="nav">
 
@@ -168,18 +173,21 @@ <h4>Sample</h4>
 
 	<!-- javascript libraries and plugins  -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/nanobar/0.4.2/nanobar.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.3.0/perfect-scrollbar.min.js"></script>
 	<script>
 		$(function() {
 
+			// website loader
+			window.addEventListener('load', () => {
+				const webloader = document.getElementById('webloader');
+				setTimeout(() => {
+					webloader.classList.add('out');
+				}, 300);
+			});
+
 			// perfect scrollbar
 			const ps = new PerfectScrollbar('.scrollbar');
 
-			// nanobar
-			var nanobar = new Nanobar();
-			    nanobar.go(100);
-
 			// responsive navigation
 			$('.nav .click').on('click', function() {
 				$('.nav .responsive').toggleClass('expandable');
