From 53878a440aacaede54c494698a6544068763ac7e Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Tue, 5 May 2020 22:27:37 +0200 Subject: [PATCH] added loading overlay on socket.io server connection --- public/css/modules/animations.css | 41 +++++++++++++++++++++++++++++++ public/css/modules/globals.css | 22 +++++++++++++++++ public/css/style.css | 1 + public/index.html | 10 ++++++++ public/js/app.js | 4 +-- public/js/modules/socket.js | 4 +++ 6 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 public/css/modules/animations.css diff --git a/public/css/modules/animations.css b/public/css/modules/animations.css new file mode 100644 index 0000000..5b78547 --- /dev/null +++ b/public/css/modules/animations.css @@ -0,0 +1,41 @@ +/* Source: https://loading.io/css/ */ +.lds-ring { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} + +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid #fff; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: #fff transparent transparent transparent; +} + +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} + +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} + +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} + +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css index 32f051c..a5665af 100644 --- a/public/css/modules/globals.css +++ b/public/css/modules/globals.css @@ -1,3 +1,25 @@ +#loading_overlay { + justify-content: center; + align-items: center; + position: absolute; + flex-direction: column; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + display: none; + z-index: 1000; +} + +#loading_overlay.active { + display: flex; +} + +#loading_text { + margin-bottom: 20px; +} + #main_content { margin-left: 48px; width: calc(100% - 48px); diff --git a/public/css/style.css b/public/css/style.css index f15c2a8..3200013 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -6,6 +6,7 @@ @import './modules/normalize.css'; @import './modules/base.css'; @import './modules/globals.css'; +@import './modules/animations.css'; @import './modules/progressbar.css'; @import './modules/sidebar.css'; diff --git a/public/index.html b/public/index.html index 2e3e909..d8e9335 100644 --- a/public/index.html +++ b/public/index.html @@ -16,6 +16,16 @@ +
+ Connecting to the server... +
+
+
+
+
+
+
+