Major TOM logo mark for the icon and the loader

app.js

@@ -143,16 +143,16 @@ function clearCursor() {
 }
 map.getCanvas().addEventListener('mouseleave', clearCursor)
 
-// ---- loading indicator (as climate-globe/app.js) -------------------------------------------------------------
+// ---- loading indicator (as climate-globe/app.js, with the Major TOM logo) -------------------------------------------------------------
 
-const bars = [...document.querySelectorAll('#loader polygon')]                  // 4 columns x 5, each top to bottom
+const bars = [...document.querySelectorAll('#loader polygon')]                  // the logo's 4 panels, left to right
 const still = matchMedia('(prefers-reduced-motion: reduce)').matches
 let loaderTimer = null, animation = null, tick = 0
 
 function animateFlag() {
-  const n = bars.length, k = tick++ % (2 * n)                  // first n ticks fill, next n empty
+  const n = bars.length, k = tick++ % (2 * n)                  // first n ticks light the panels, next n clear them
   if (k < n) bars[k].classList.add('on')
-  else { const i = k - n, col = Math.floor(i / 5); bars[col * 5 + 4 - (i % 5)].classList.remove('on') }
+  else bars[k - n].classList.remove('on')
 }
 function startLoader(text) {
   for (const b of bars) b.classList.remove('on')
@@ -163,8 +163,8 @@ function startLoader(text) {
   clearTimeout(loaderTimer); clearInterval(animation)
   loaderTimer = setTimeout(() => {                                               // fast and cached loads: no flash
     $('loader').hidden = false
-    if (still) bars.slice(0, 10).forEach(b => b.classList.add('on'))
-    else animation = setInterval(animateFlag, 70)
+    if (still) bars.slice(0, 2).forEach(b => b.classList.add('on'))
+    else animation = setInterval(animateFlag, 180)
   }, 150)
 }
 function loaderProgress(bytes, expected) {

index.html

@@ -25,7 +25,7 @@
   .brand-strip { display: flex; height: 3px; }
   .brand-strip span { flex: 1; }
   .bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
-  .bar img { width: 26px; height: 26px; }
+  .bar img { width: 30px; height: 26px; }
   .crumbs { font-family: var(--mono); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .crumbs .org { color: var(--ink-3); }
   .crumbs b { font-weight: 500; }
@@ -130,28 +130,12 @@
     <div id="places" class="places" aria-hidden="true"></div>
     <div id="status"></div>
     <div id="loader" role="status" aria-live="polite" hidden>
-      <!-- the Major TOM flag (mt-icon.svg, its 20 bars): they light up as the data arrives -->
-      <svg viewBox="398 10 100 86" aria-hidden="true">
-      <polygon style="--on:var(--mt-navy)" points="420.45 14.5 402.24 23.6 402.24 34.39 420.45 25.29"/>
-      <polygon style="--on:var(--mt-navy)" points="420.45 28.89 402.24 37.99 402.24 48.79 420.45 39.69"/>
-      <polygon style="--on:var(--mt-navy)" points="420.45 43.28 402.24 52.38 402.24 63.18 420.45 54.08"/>
-      <polygon style="--on:var(--mt-navy)" points="420.45 57.67 402.24 66.78 402.24 77.57 420.45 68.47"/>
-      <polygon style="--on:var(--mt-navy)" points="420.45 72.07 402.24 81.17 402.24 92.6 420.45 83.04"/>
-      <polygon style="--on:var(--mt-blue)" points="424.04 14.26 446.45 22.88 446.45 33.67 424.04 25.05"/>
-      <polygon style="--on:var(--mt-blue)" points="424.04 28.65 446.45 37.26 446.45 48.06 424.04 39.45"/>
-      <polygon style="--on:var(--mt-blue)" points="424.04 43.04 446.45 51.66 446.45 62.46 424.04 53.84"/>
-      <polygon style="--on:var(--mt-blue)" points="424.04 57.43 446.45 66.05 446.45 76.85 424.04 68.23"/>
-      <polygon style="--on:var(--mt-blue)" points="424.04 71.83 446.45 80.45 446.45 91.84 424.04 82.79"/>
-      <polygon style="--on:var(--mt-green)" points="450.04 22.91 472.45 14.29 472.45 25.08 450.04 33.7"/>
-      <polygon style="--on:var(--mt-green)" points="450.04 37.3 472.45 28.68 472.45 39.48 450.04 48.1"/>
-      <polygon style="--on:var(--mt-green)" points="450.04 51.69 472.45 43.07 472.45 53.87 450.04 62.49"/>
-      <polygon style="--on:var(--mt-green)" points="450.04 66.08 472.45 57.47 472.45 68.27 450.04 76.88"/>
-      <polygon style="--on:var(--mt-green)" points="450.04 80.48 472.45 71.86 472.45 82.82 450.04 91.88"/>
-      <polygon style="--on:var(--mt-orange)" points="476.04 14.5 494.24 23.6 494.24 34.39 476.04 25.29"/>
-      <polygon style="--on:var(--mt-orange)" points="476.04 28.89 494.24 37.99 494.24 48.79 476.04 39.69"/>
-      <polygon style="--on:var(--mt-orange)" points="476.04 43.28 494.24 52.38 494.24 63.18 476.04 54.08"/>
-      <polygon style="--on:var(--mt-orange)" points="476.04 57.67 494.24 66.78 494.24 77.57 476.04 68.47"/>
-      <polygon style="--on:var(--mt-orange)" points="476.04 72.07 494.24 81.17 494.24 92.6 476.04 83.04"/>
+      <!-- the Major TOM logo mark (mt-icon.svg): its four panels light up in turn while data loads -->
+      <svg viewBox="0 0 345 296" aria-hidden="true">
+      <polygon style="--on:var(--mt-navy)" points="0 37 75 0 75 258 0 296"/>
+      <polygon style="--on:var(--mt-blue)" points="75 0 172 37 172 296 75 258"/>
+      <polygon style="--on:var(--mt-green)" points="172 37 269 0 269 258 172 296"/>
+      <polygon style="--on:var(--mt-orange)" points="269 0 345 37 345 296 269 258"/>
       </svg>
       <div id="loader-phase"></div>
       <div id="loader-text"></div>