diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index 9820d0d69555..256d6b00b4ed 100644 --- a/aspnetcore/blazor/fundamentals/startup.md +++ b/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 . +## 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 + + + + +
+``` + +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)