From bed8224c793636cba481497e30d98a5e67d776f8 Mon Sep 17 00:00:00 2001 From: adrien Date: Thu, 29 Jun 2023 16:45:40 +0200 Subject: [PATCH] new loading progress circle --- index.html | 10 ++++++++-- main.js | 5 ++--- style.css | 46 +++++++++++++++++++++++++++------------------- 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 5a0ed91..4edea5d 100644 --- a/index.html +++ b/index.html @@ -143,9 +143,15 @@
-
+ +
+ Se déplacer : ZQSD ou ↑←↓→
+ Sauter : ESPACE
+ Regarder : Souris +
+
0%
+ - diff --git a/main.js b/main.js index 2f89bdb..7336e63 100644 --- a/main.js +++ b/main.js @@ -35,12 +35,11 @@ piano.loop = false const loadMngr = new THREE.LoadingManager(); const loader = new THREE.TextureLoader(loadMngr); loadMngr.onStart = function (url, itemsLoaded, itemsTotal) { - progressCircle.setAttribute("data-progress", 0) + progressCircle.innerText = "0%" progressCircle.style.setProperty("--progress", "0deg") - } loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) { - progressCircle.setAttribute("data-progress", Math.floor(100 * itemsLoaded / itemsTotal)) + progressCircle.innerText = Math.floor(100 * itemsLoaded / itemsTotal) + "%" progressCircle.style.setProperty("--progress", Math.floor(360 * itemsLoaded / itemsTotal)+"deg") } loadMngr.onError = function (url) { diff --git a/style.css b/style.css index 8111c42..655eb74 100644 --- a/style.css +++ b/style.css @@ -2,9 +2,7 @@ body { margin: 0; background-color: #000; color: #fff; - font-family: Monospace; - font-size: 13px; - line-height: 24px; + font-family: Georgia, serif; overscroll-behavior: none; } @@ -30,7 +28,6 @@ body { position: absolute; left: 0; width: 100%; - font-family: Georgia, serif; background: transparent; justify-content: center; z-index: 1; @@ -39,32 +36,43 @@ body { #message.loading { display: flex; - top: 30vh; + flex-direction: column; + top: 20vh; + width: 100%; + margin: auto; + align-items: center; + gap: 5rem; + text-align: center; + font-size: 1.7em; } #progressCircle { display: flex; - width: 200px; - height: 200px; + justify-content: center; + align-items: center; + position: relative; + width: 150px; + height: 150px; + border: 4px solid dimgray; border-radius: 50%; - background: conic-gradient(#1da8b7 var(--progress), dimgray 0deg); font-size: 0; + font-size: 3vh; + font-weight: 700; + font-family: system-ui; + text-align: center; } #progressCircle::after { - content: attr(data-progress) '%'; + content: ""; display: flex; - justify-content: center; - flex-direction: column; - width: 100%; - margin: 4px; + position: absolute; + width: 150px; + height: 150px; + top: -4px; + left: -4px; + border: 4px solid #1da8b7; border-radius: 50%; - color: white; - background: black; - font-size: 3vh; - font-weight: 400; - font-family: system-ui; - text-align: center; + mask: conic-gradient(black var(--progress), transparent var(--progress)); } #message a {