better loading screen

diff --git a/resources/js/components/common/Loading.jsx b/resources/js/components/common/Loading.jsx
index b850dec12d3f3d718cdb58f8ee24ea3cd14ccee3..828c009e83c43a56797c62b1979f668ae7584681 100644 (file)
--- a/resources/js/components/common/Loading.jsx
+++ b/resources/js/components/common/Loading.jsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import { ProgressBar } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
-const Loading = () => <div className="loading">
-       <ProgressBar animated now={100} variant="info" />
-</div>;
+const Loading = () => {
+       const { t } = useTranslation();
+
+       return <div className="loading">
+               <div className="circle">
+                       <span className="text">{t('general.loading')}</span>
+               </div>
+       </div>;
+};
 
 export default Loading;

diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index a656acc28a89a27b06f33ce79f018cb382e6c40a..c05f87e7d51b27d6da96fcca35b92e3a00a4f4a5 100644 (file)
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -247,6 +247,7 @@ export default {
                                fr: 'Französisch',
                        },
                        loadError: 'Fehler beim Laden',
+                       loading: 'Laden',
                        loadSuccess: 'Geladen',
                        pleaseSelect: 'Bitte wählen',
                        resetError: 'Fehler beim Zurücksetzen',

diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 9fe8dbc1528d495cb3aca791aafb386c9f1a6c1f..08783ce10814f06f1be9bb8531f16436e27308ab 100644 (file)
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -247,6 +247,7 @@ export default {
                                fr: 'French',
                        },
                        loadError: 'Error loading',
+                       loading: 'Loading',
                        loadSuccess: 'Loading successful',
                        pleaseSelect: 'Please select',
                        resetError: 'Error resetting',

diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 1f73fb450a0c0ca07ba6390e6393f6ad7625b98f..f81daa321f202c6b8a2ad57de522272a2833b051 100644 (file)
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -30,6 +30,41 @@ h1 {
        }
 }
 
+@keyframes loading-pulse {
+       from {
+               box-shadow: 0 0 0 2em #aaa;
+       }
+       to {
+               box-shadow: 0 0 1em 4em #aaa;
+       }
+}
+
+.loading {
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       height: 80vh;
+       .circle {
+               display: flex;
+               align-items: center;
+               justify-content: center;
+               content: "";
+               background: #888;
+               width: min(30vw, 30vh);
+               height: min(30vw, 30vh);
+               border-radius: min(15vw, 15vh);
+               line-height: min(15vw, 15vh);
+               animation-name: loading-pulse;
+               animation-duration: 2s;
+               animation-iteration-count: infinite;
+               animation-direction: alternate;
+       }
+       .text {
+               font-size: min(4vw, 4vh);
+               min-font-size: 200%;
+       }
+}
+
 .modal-90w {
        width: 90%;
        max-width: none !important;