From 29a0851c08034f885b0549f0142a3192e9a661dc Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 14 Apr 2020 17:36:25 +1000 Subject: [PATCH] Added a loading spinner --- src/components/LoadingOverlay.js | 26 ++++++++++++++++++++++++++ src/components/Spinner.css | 13 +++++++++++++ src/components/Spinner.js | 24 ++++++++++++++++++++++++ src/images/Loading.png | Bin 0 -> 7265 bytes src/routes/Game.js | 2 ++ 5 files changed, 65 insertions(+) create mode 100644 src/components/LoadingOverlay.js create mode 100644 src/components/Spinner.css create mode 100644 src/components/Spinner.js create mode 100644 src/images/Loading.png diff --git a/src/components/LoadingOverlay.js b/src/components/LoadingOverlay.js new file mode 100644 index 0000000..eca0d0b --- /dev/null +++ b/src/components/LoadingOverlay.js @@ -0,0 +1,26 @@ +import React from "react"; +import { Box } from "theme-ui"; + +import Spinner from "./Spinner"; + +function LoadingOverlay() { + return ( + + + + ); +} + +export default LoadingOverlay; diff --git a/src/components/Spinner.css b/src/components/Spinner.css new file mode 100644 index 0000000..d571a2f --- /dev/null +++ b/src/components/Spinner.css @@ -0,0 +1,13 @@ +.spinner { + width: 32px; + height: 32px; + position: relative; + + animation: rotate 2s infinite linear; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} diff --git a/src/components/Spinner.js b/src/components/Spinner.js new file mode 100644 index 0000000..1dc1153 --- /dev/null +++ b/src/components/Spinner.js @@ -0,0 +1,24 @@ +import React from "react"; +import { Box } from "theme-ui"; + +import "./Spinner.css"; +import spinnerImage from "../images/Loading.png"; + +function Spinner() { + return ( + + + + ); +} + +export default Spinner; diff --git a/src/images/Loading.png b/src/images/Loading.png new file mode 100644 index 0000000000000000000000000000000000000000..5c76e04ff634ddd5d092c073190bb25376638ecc GIT binary patch literal 7265 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 + {authenticationStatus === "unknown" && } ); }