New: Project Aphrodite

frontend/src/Components/Loading/LoadingIndicator.css

@@ -0,0 +1,49 @@
+.loading {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.rippleContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.ripple:nth-child(0) {
+  animation-delay: -0.8s;
+}
+
+.ripple:nth-child(1) {
+  animation-delay: -0.6s;
+}
+
+.ripple:nth-child(2) {
+  animation-delay: -0.4s;
+}
+
+.ripple:nth-child(3) {
+  animation-delay: -0.2s;
+}
+
+.ripple {
+  position: absolute;
+  border: 2px solid #3a3f51;
+  border-radius: 100%;
+  animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
+  animation-fill-mode: both;
+}
+
+@keyframes rippleContainer {
+  0% {
+    opacity: 1;
+    transform: scale(0.1);
+  }
+
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

frontend/src/Components/Loading/LoadingIndicator.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './LoadingIndicator.css';
+
+function LoadingIndicator({ className, size }) {
+  const sizeInPx = `${size}px`;
+  const width = sizeInPx;
+  const height = sizeInPx;
+
+  return (
+    <div
+      className={className}
+      style={{ height }}
+    >
+      <div
+        className={styles.rippleContainer}
+        style={{ width, height }}
+      >
+        <div
+          className={styles.ripple}
+          style={{ width, height }}
+        />
+
+        <div
+          className={styles.ripple}
+          style={{ width, height }}
+        />
+
+        <div
+          className={styles.ripple}
+          style={{ width, height }}
+        />
+      </div>
+    </div>
+  );
+}
+
+LoadingIndicator.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number
+};
+
+LoadingIndicator.defaultProps = {
+  className: styles.loading,
+  size: 50
+};
+
+export default LoadingIndicator;

frontend/src/Components/Loading/LoadingMessage.css

@@ -0,0 +1,6 @@
+.loadingMessage {
+  margin: 50px 10px 0;
+  text-align: center;
+  font-weight: 300;
+  font-size: 36px;
+}

frontend/src/Components/Loading/LoadingMessage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './LoadingMessage.css';
+
+const messages = [
+  'Welcome to Radarr Aphrodite Preview. Enjoy'
+  // TODO Add some messages here
+];
+
+function LoadingMessage() {
+  const index = Math.floor(Math.random() * messages.length);
+  const message = messages[index];
+
+  return (
+    <div className={styles.loadingMessage}>
+      {message}
+    </div>
+  );
+}
+
+export default LoadingMessage;