frontend > app

app/components/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,19 @@
+// @flow
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+
+@observer class LoadingIndicator extends React.Component {
+  componentDidMount() {
+    this.props.ui.enableProgressBar();
+  }
+
+  componentWillUnmount() {
+    this.props.ui.disableProgressBar();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default inject('ui')(LoadingIndicator);

app/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const LoadingIndicatorBar = () => {
+  return (
+    <Container>
+      <Loader />
+    </Container>
+  );
+};
+
+const loadingFrame = keyframes`
+  from {margin-left: -100%; z-index:100;}
+  to {margin-left: 100%; }
+`;
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+
+  background-color: #03A9F4;
+  width: 100%;
+  animation: ${loadingFrame} 4s ease-in-out infinite;
+  animation-delay: 250ms;
+  margin-left: -100%;
+`;
+
+const Loader = styled.div`
+  width: 100%;
+  height: 2px;
+  background-color: #03A9F4;
+`;
+
+export default LoadingIndicatorBar;

app/components/LoadingIndicator/index.js

@@ -0,0 +1,5 @@
+// @flow
+import LoadingIndicator from './LoadingIndicator';
+import LoadingIndicatorBar from './LoadingIndicatorBar';
+export default LoadingIndicator;
+export { LoadingIndicatorBar };