adrien/daedalus
adrien/daedalus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new loading progress circle

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-06-29 16:45:40 +02:00
parent cb1e89c732
commit bed8224c79
3 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -143,9 +143,15 @@
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<span id="message" class="loading"><div id="progressCircle" data-progress="0" style="--progress: 0deg;"></div></span> <span id="message" class="loading">
<div>
Se déplacer : ZQSD ou ↑←↓→<br>
Sauter : ESPACE<br>
Regarder : Souris
</div>
<div id="progressCircle" style="--progress: 0deg;">0%</div>
</span>
<script type="module" src="main.js"></script> <script type="module" src="main.js"></script>
</body> </body>
</html> </html>

5
main.js
View File

@ -35,12 +35,11 @@ piano.loop = false
const loadMngr = new THREE.LoadingManager(); const loadMngr = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadMngr); const loader = new THREE.TextureLoader(loadMngr);
loadMngr.onStart = function (url, itemsLoaded, itemsTotal) { loadMngr.onStart = function (url, itemsLoaded, itemsTotal) {
progressCircle.setAttribute("data-progress", 0) progressCircle.innerText = "0%"
progressCircle.style.setProperty("--progress", "0deg") progressCircle.style.setProperty("--progress", "0deg")
} }
loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) { 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") progressCircle.style.setProperty("--progress", Math.floor(360 * itemsLoaded / itemsTotal)+"deg")
} }
loadMngr.onError = function (url) { loadMngr.onError = function (url) {

46
style.css
View File

@ -2,9 +2,7 @@ body {
margin: 0; margin: 0;
background-color: #000; background-color: #000;
color: #fff; color: #fff;
font-family: Monospace; font-family: Georgia, serif;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none; overscroll-behavior: none;
} }
@ -30,7 +28,6 @@ body {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
font-family: Georgia, serif;
background: transparent; background: transparent;
justify-content: center; justify-content: center;
z-index: 1; z-index: 1;
@ -39,32 +36,43 @@ body {
#message.loading { #message.loading {
display: flex; 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 { #progressCircle {
display: flex; display: flex;
width: 200px; justify-content: center;
height: 200px; align-items: center;
position: relative;
width: 150px;
height: 150px;
border: 4px solid dimgray;
border-radius: 50%; border-radius: 50%;
background: conic-gradient(#1da8b7 var(--progress), dimgray 0deg);
font-size: 0; font-size: 0;
font-size: 3vh;
font-weight: 700;
font-family: system-ui;
text-align: center;
} }
#progressCircle::after { #progressCircle::after {
content: attr(data-progress) '%'; content: "";
display: flex; display: flex;
justify-content: center; position: absolute;
flex-direction: column; width: 150px;
width: 100%; height: 150px;
margin: 4px; top: -4px;
left: -4px;
border: 4px solid #1da8b7;
border-radius: 50%; border-radius: 50%;
color: white; mask: conic-gradient(black var(--progress), transparent var(--progress));
background: black;
font-size: 3vh;
font-weight: 400;
font-family: system-ui;
text-align: center;
} }
#message a { #message a {