Styling for preloader on bottles page

src/assets/scripts/bottles.jsx

@@ -13,7 +13,7 @@ function Bottles() {
 
   if (isLoading) return (
     <div id="bottle-preloader" className="flex">
-      <div id="bottle-status" className="justify-content-center mx-auto">
+      <div id="bottle-status" className="my-auto">
         <i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
         <div id="bottle-loading-text"><p className="grid-gray">steeping...</p></div>
       </div>

src/layouts/page/bottles.html

@@ -40,6 +40,36 @@
   .expand{
     cursor: pointer;
   }
+    .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;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      background-position: center;
+      margin: -100px 0 0 -100px;
+    }
+    #bottle-loading-text {
+      font-size: 20px;
+      text-align: center;
+      animation: pulse 1s infinite !important;
+    }
 
   @media screen and (max-width: 576px) {
 

src/layouts/partials/bottle-preloader.html

@@ -24,6 +24,11 @@
   #bottle-status {
     width: 200px;
     height: 200px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-position: center;
+    margin: -100px 0 0 -100px;
   }
   #bottle-loading-text {
     font-size: 20px;