Created partial for bottle-preloader

src/layouts/index.html

@@ -1,5 +1,7 @@
 {{ define "main" }}
 
+{{- partial "bottle-preloader.html" -}}
+
 <!-- Hero Section -->
 
 {{- partial "mobile-art-home" -}}

src/layouts/partials/bottle-preloader.html

@@ -0,0 +1,40 @@
+<div id="bottle-preloader" class="flex">
+  <div id="bottle-status" class="justify-content-center mx-auto">
+    <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
+    <div id="bottle-loading-text"><p class="grid-gray">steeping...</p></div>
+  </div>
+</div>
+
+<style>
+  .tea-icon{
+    display:block;
+    text-align:center;
+    animation: pulse 1s infinite;
+  }
+  @keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+  }
+  #bottle-preloader {
+    width: 100%;
+    height: 200px;
+    background: #1a1a1a;
+  }
+  #bottle-status {
+    width: 200px;
+    height: 200px;
+  }
+  #bottle-loading-text {
+    font-size: 20px;
+    text-align: center;
+    animation: pulse 1s infinite;
+  }
+</style>
+
+<script>
+  $(window).on('load', function() {
+    $('#status').fadeOut();
+    $('#preloader').delay(350).fadeOut('slow');
+  });
+</script>