From 41299c4d7edf6af5cf385efa33cb0a33cf4794c9 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Sat, 3 Mar 2018 22:05:44 +0300
Subject: [PATCH] add preloader block

---
 .../preloader/__bounce/preloader__bounce.scss | 35 +++++++++++++++++++
 web/app/components/preloader/index.js         |  5 +++
 web/app/components/preloader/preloader.jsx    | 13 +++++++
 web/app/components/preloader/preloader.scss   |  5 +++
 4 files changed, 58 insertions(+)
 create mode 100644 web/app/components/preloader/__bounce/preloader__bounce.scss
 create mode 100644 web/app/components/preloader/index.js
 create mode 100644 web/app/components/preloader/preloader.jsx
 create mode 100644 web/app/components/preloader/preloader.scss

diff --git a/web/app/components/preloader/__bounce/preloader__bounce.scss b/web/app/components/preloader/__bounce/preloader__bounce.scss
new file mode 100644
index 00000000..009c0c7d
--- /dev/null
+++ b/web/app/components/preloader/__bounce/preloader__bounce.scss
@@ -0,0 +1,35 @@
+.preloader__bounce {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 3px;
+  background-color: #333;
+  border-radius: 100%;
+  animation: preloaderBounce 1.4s infinite ease-in-out both;
+
+  &:first-child {
+    animation-delay: -.32s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: -.16s;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @keyframes preloaderBounce {
+    0% {
+      transform: scale(0);
+    }
+
+    40% {
+      transform: scale(1);
+    }
+
+    80%, 100% {
+      transform: scale(0);
+    }
+  }
+}
diff --git a/web/app/components/preloader/index.js b/web/app/components/preloader/index.js
new file mode 100644
index 00000000..74d4e5b1
--- /dev/null
+++ b/web/app/components/preloader/index.js
@@ -0,0 +1,5 @@
+export { default } from './preloader';
+
+require('./preloader.scss');
+
+require('./__bounce/preloader__bounce.scss');
diff --git a/web/app/components/preloader/preloader.jsx b/web/app/components/preloader/preloader.jsx
new file mode 100644
index 00000000..e2ab0ed5
--- /dev/null
+++ b/web/app/components/preloader/preloader.jsx
@@ -0,0 +1,13 @@
+import { h, Component } from 'preact';
+
+export default class Preloader extends Component {
+  render(props, state) {
+    return (
+      <div className={b('preloader', props)}>
+        <div className="preloader__bounce"/>
+        <div className="preloader__bounce"/>
+        <div className="preloader__bounce"/>
+      </div>
+    );
+  }
+}
diff --git a/web/app/components/preloader/preloader.scss b/web/app/components/preloader/preloader.scss
new file mode 100644
index 00000000..932b616b
--- /dev/null
+++ b/web/app/components/preloader/preloader.scss
@@ -0,0 +1,5 @@
+.preloader {
+  width: 60px;
+  text-align: center;
+  font-size: 0;
+}