diff --git a/app.js b/app.js
index 36a2cad12..b175b763e 100644
--- a/app.js
+++ b/app.js
@@ -1,7 +1,7 @@
 "use strict";
 
 import { dropdown } from "./forms.js";
-import { RouteSnapper } from "./route-snapper/lib.js";
+import { RouteSnapper, fetchWithProgress } from "./route-snapper/lib.js";
 
 export class App {
   constructor() {
@@ -404,7 +404,6 @@ async function setupRouteSnapper(app) {
   // TODO Slight hack. These files are stored in an S3 bucket, which only has an HTTP interface. When deployed to Github pages over HTTPS, we can't mix HTTP and HTTPS content, so use the Cloudfront HTTPS interface. That'll need CDN invalidations when we update these files. But when serving locally for development, HTTPS is also fine to use.
   const url = `https://play.abstreet.org/route-snappers/${app.authority}.bin`;
   console.log(`Grabbing ${url}`);
-  const resp = await fetch(url);
-  const mapBytes = await resp.arrayBuffer();
-  window.routeSnapper = new RouteSnapper(app, new Uint8Array(mapBytes));
+  const mapBytes = await fetchWithProgress(url, "snap-progress");
+  window.routeSnapper = new RouteSnapper(app, mapBytes);
 }
diff --git a/route-snapper/lib.js b/route-snapper/lib.js
index 18a3d3257..a40f0c8ca 100644
--- a/route-snapper/lib.js
+++ b/route-snapper/lib.js
@@ -149,3 +149,35 @@ export class RouteSnapper {
       .setData(JSON.parse(this.inner.renderGeojson()));
   }
 }
+
+export async function fetchWithProgress(url, progressId) {
+  const response = await fetch(url);
+  const reader = response.body.getReader();
+
+  const contentLength = response.headers.get("Content-Length");
+  const progressBar = document.getElementById(progressId);
+
+  let receivedLength = 0;
+  let chunks = [];
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    chunks.push(value);
+    receivedLength += value.length;
+
+    const percent = (100.0 * receivedLength) / contentLength;
+    progressBar.style = `background: red; width: ${percent}%`;
+  }
+
+  let allChunks = new Uint8Array(receivedLength);
+  let position = 0;
+  for (let chunk of chunks) {
+    allChunks.set(chunk, position);
+    position += chunk.length;
+  }
+
+  return allChunks;
+}
diff --git a/scheme.html b/scheme.html
index f637b2e49..abb5f87e3 100644
--- a/scheme.html
+++ b/scheme.html
@@ -72,7 +72,8 @@ <h1 id="authority">Loading...</h1>
       </div>
       <div id="panel" class="content-container"></div>
       <div id="snap-tool" class="overlay-topright">
-        Route snapping tool loading...
+        <!-- TODO the text should be fixed, and the progress bar float -->
+        <div id="snap-progress">Route snapping tool loading...</div>
       </div>
     </main>