diff --git a/public/css/custom.css b/public/css/custom.css index 10fbd7e..2d98bd8 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -94,6 +94,53 @@ main > div.content { text-align: center; } +/* Loader +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +#loader { + display: flex; + position: fixed; + z-index: 100; + background: #ffffffa8; + width: 100vw; + height: 100vh; +} +.lds-ring { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + margin: auto; +} +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 4px solid #a2a2a2; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: #a2a2a2 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); + } +} + /* Shared –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button { diff --git a/src/js/api.php b/src/js/api.php index 3b96f14..7b963b2 100644 --- a/src/js/api.php +++ b/src/js/api.php @@ -4,7 +4,12 @@ const http = { payload = payload || null; callbk = callbk || null; const oReq = new XMLHttpRequest(); - oReq.addEventListener("load", function() { if (callbk) callbk(this.responseText) }); + document.getElementById('loader').style = ''; + oReq.addEventListener("load", function() { + document.getElementById('loader').style = 'display: none'; + if (callbk) + callbk(this.responseText); + }); oReq.open(method, path); oReq.setRequestHeader('Content-Type', 'application/json'); oReq.send(payload); diff --git a/src/views/public/head.php b/src/views/public/head.php index 3c45938..b23b519 100644 --- a/src/views/public/head.php +++ b/src/views/public/head.php @@ -1,3 +1,5 @@ +