Use progress indicator instead of spinner

apps/jscad-web/main.js

@@ -172,6 +172,16 @@ const exportModel = async (format, extension) => {
   }
 }
 
+const onProgress = (value, note) => {
+  const el = progress.querySelector('progress')
+  if (value == undefined) {
+    el.removeAttribute('value')
+  } else {
+    el.value = value
+  }
+  progress.querySelector('div').innerText = note ?? ''
+}
+
 const worker = new Worker('./build/bundle.worker.js')
 const handlers = {
   entities: ({ entities, mainTime, convertTime }) => {
@@ -180,25 +190,28 @@ const handlers = {
     console.log('Main execution:', mainTime?.toFixed(2), ', jscad mesh -> gl:', convertTime?.toFixed(2))
     setError(undefined)
   },
+  onProgress,
 }
 
 /** @type {JscadWorker} */
 const workerApi = messageProxy(worker, handlers, { onJobCount: trackJobs })
 
-const spinner = byId('spinner')
+const progress = byId('progress')
+let jobs = 0
 let firstJobTimer
 
 function trackJobs(jobs) {
   if (jobs === 1) {
+    // do not show progress for fast renders
     clearTimeout(firstJobTimer)    
-    // do not show spinner for fast renders
     firstJobTimer = setTimeout(() => {
-      spinner.style.display = 'block'
+      onProgress()
+      progress.style.display = 'block'
     }, 300)
   }
   if (jobs === 0) {
     clearTimeout(firstJobTimer)
-    spinner.style.display = 'none'
+    progress.style.display = 'none'
   }
 }
 

apps/jscad-web/static/index.html

@@ -44,7 +44,10 @@ <h1>JSCAD</h1>
 
         <div id="overlay">
           <div class="above-error">
-            <div id="spinner" title="Processing..."></div>
+            <div id="progress">
+              <div></div>
+              <progress title="Processing..."></progress>
+            </div>
 
             <div id="model-options">
               <div id="paramsDiv"></div>

apps/jscad-web/static/main.css

@@ -572,25 +572,19 @@ p {
   border-top-left-radius: 4px;
 }
 
-#spinner {
+#progress {
   position: absolute;
   bottom: 10px;
   right: 10px;
-  border: 6px solid #f3f3f3;
-  border-top: 6px solid #27c;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  animation: spin 1s linear infinite;
   display: none;
+  accent-color: #27c;
 }
-.dark #spinner {
-  border: 6px solid #222;
-  border-top: 6px solid #16a;
+.dark #progress {
+  accent-color: #2e96ea;
 }
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+#progress > div {
+  font-size: small;
+  text-align: right;
 }
 
 .above-error {