From 6079d802f23cb1ed3ff702a9c7b503797ff3b889 Mon Sep 17 00:00:00 2001 From: adrien Date: Wed, 28 Jun 2023 17:37:52 +0200 Subject: [PATCH] loading progress circle --- index.html | 2 +- main.js | 9 ++++++--- style.css | 26 +++++++++++++++++++++++++- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index c96ca75..5a0ed91 100644 --- a/index.html +++ b/index.html @@ -143,7 +143,7 @@
- +
diff --git a/main.js b/main.js index 823af55..2f89bdb 100644 --- a/main.js +++ b/main.js @@ -35,10 +35,13 @@ piano.loop = false const loadMngr = new THREE.LoadingManager(); const loader = new THREE.TextureLoader(loadMngr); loadMngr.onStart = function (url, itemsLoaded, itemsTotal) { - message.innerHTML = 'Chargement : 0%...' + progressCircle.setAttribute("data-progress", 0) + progressCircle.style.setProperty("--progress", "0deg") + } loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) { - message.innerHTML = 'Chargement : ' + Math.floor(100 * itemsLoaded / itemsTotal) + '%...' + progressCircle.setAttribute("data-progress", Math.floor(100 * itemsLoaded / itemsTotal)) + progressCircle.style.setProperty("--progress", Math.floor(360 * itemsLoaded / itemsTotal)+"deg") } loadMngr.onError = function (url) { message.innerHTML = 'Erreur de chargement' @@ -101,7 +104,7 @@ const wallMaterial = new THREE.MeshStandardMaterial({ aoMap : loader.load('textures/stonewall/ao.png'), roughnessMap: loader.load('textures/stonewall/roughness.png'), roughness : 1, - envMapIntensity: 0.2 + envMapIntensity: 0.1 }) const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial); diff --git a/style.css b/style.css index 078095c..49b3ff0 100644 --- a/style.css +++ b/style.css @@ -40,7 +40,31 @@ body { #message.loading { display: flex; top: 30vh; - font-size: 4vh; +} + +#message.loading div { + display: flex; + width: 200px; + height: 200px; + border-radius: 50%; + background: conic-gradient(#1da8b7 var(--progress), dimgray 0deg); + font-size: 0; +} + +#message.loading div::after { + content: attr(data-progress) '%'; + display: flex; + justify-content: center; + flex-direction: column; + width: 100%; + margin: 4px; + border-radius: 50%; + color: white; + background: black; + font-size: 3vh; + font-weight: 400; + font-family: system-ui; + text-align: center; } #message a {