homeflowjs 0.13.20 → 0.13.21

package/instant-valuation/instant-valuation/instant-valuation.styles.scss

@@ -652,9 +652,70 @@
   }
 }
 
+// Loading
 .hfjs-instant-val__loader {
   margin-top: 180px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  padding: 4rem;
+}
+// Loading
+.hfjs-instant-val__loader div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #888;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
+.hfjs-instant-val__loader div:nth-child(1) {
+  left: 8px;
+  animation: valuation-loader1 0.6s infinite;
+}
+.hfjs-instant-val__loader div:nth-child(2) {
+  left: 8px;
+  animation: valuation-loader2 0.6s infinite;
+}
+.hfjs-instant-val__loader div:nth-child(3) {
+  left: 32px;
+  animation: valuation-loader2 0.6s infinite;
+}
+.hfjs-instant-val__loader div:nth-child(4) {
+  left: 56px;
+  animation: valuation-loader3 0.6s infinite;
+}
+@keyframes valuation-loader1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes valuation-loader2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+@keyframes valuation-loader3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
 
 .instant-valuation__price-label {
   margin-bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.13.20",
+  "version": "0.13.21",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/shared/loader.component.jsx

@@ -9,6 +9,7 @@ const Loader = ({ containerClass, className, message }) => (
       <div />
       <div />
       <div />
+      <div />
     </div>
 
     {message && <p style={{ marginTop: '10px' }}>{message}</p>}