Blazor WASM loading progress indicator (#26744)

aspnetcore/blazor/fundamentals/startup.md

@@ -714,6 +714,49 @@ In the following examples, a [Content Security Policy (CSP)](https://developer.m
 
 For more information on CSPs, see <xref:blazor/security/content-security-policy>.
 
+## Loading progress indicators
+
+*This section only applies to Blazor WebAssembly apps.*
+
+The Blazor WebAssembly project template contains Scalable Vector Graphics (SVG) and text indicators that show the loading progress of the app.
+
+The progress indicators are implemented with HTML and CSS using two CSS custom properties (variables) provided by Blazor WebAssembly:
+
+* `--blazor-load-percentage`: The percentage of app files loaded.
+* `--blazor-load-percentage-text`: The percentage of app files loaded, rounded to the nearest whole number.
+
+Using the preceding CSS variables, you can create custom progress indicators that match the styling of your app.
+
+In the following example:
+
+* `resourcesLoaded` is an instantaneous count of the resources loaded during app startup.
+* `totalResources` is the total number of resources to load.
+
+```javascript
+const percentage = resourcesLoaded / totalResources * 100;
+document.documentElement.style.setProperty(
+  '--blazor-load-percentage', `${percentage}%`);
+document.documentElement.style.setProperty(
+  '--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`);
+```
+
+The progress indicators are implemented in HTML in the `wwwroot/index.html` file:
+
+```html
+<svg class="loading-progress">
+    <circle r="40%" cx="50%" cy="50%" />
+    <circle r="40%" cx="50%" cy="50%" />
+</svg>
+<div class="loading-progress-text"></div>
+```
+
+To review the Blazor WebAssembly project template markup and styling for the default progress indicators, see the ASP.NET Core reference source:
+
+* [`wwwroot/index.html`](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/index.html)
+* [`app.css`](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/wwwroot/css/app.css)
+
+[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]
+
 ## Additional resources
 
 * [Environments: Set the app's environment](xref:blazor/fundamentals/environments)