From 6582ecacb96fb92f20ca1822269233cda3e6b0c7 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Mon, 15 Aug 2022 14:37:33 -0500 Subject: [PATCH 1/3] Blazor WASM loading progress indicator --- aspnetcore/blazor/fundamentals/startup.md | 43 +++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index 9820d0d69555..3783017397b4 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 indicator + +*This section only applies to Blazor WebAssembly apps.* + +The Blazor WebAssembly project template has a loading progress indicator that shows the loading progress of the app. + +The progress indicator is 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 a custom progress indicator that matches the styling of your app. + +In the following example: + +* `resourcesLoaded` is a count of the resources loaded at any given time 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 indicator is implemented in HTML in the `wwwroot/index.html` file: + +```html + + + + +
+``` + +To review the Blazor WebAssembly project template markup and styling for the default progress indicator, 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) From 4f6eb7157437353a82ea828857cbda80a9126b43 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 16 Aug 2022 03:47:19 -0500 Subject: [PATCH 2/3] Updates --- aspnetcore/blazor/fundamentals/startup.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index 3783017397b4..fda00b95a22f 100644 --- a/aspnetcore/blazor/fundamentals/startup.md +++ b/aspnetcore/blazor/fundamentals/startup.md @@ -714,18 +714,18 @@ In the following examples, a [Content Security Policy (CSP)](https://developer.m For more information on CSPs, see . -## Loading progress indicator +## Loading progress indicators *This section only applies to Blazor WebAssembly apps.* -The Blazor WebAssembly project template has a loading progress indicator that shows the loading progress of the app. +The Blazor WebAssembly project template contains Scalable Vector Graphics (SVG) and text indicators that show the loading progress of the app. -The progress indicator is implemented with HTML and CSS using two CSS custom properties (variables) provided by Blazor WebAssembly: +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 a custom progress indicator that matches the styling of your app. +Using the preceding CSS variables, you can create custom progress indicators that match the styling of your app. In the following example: @@ -740,7 +740,7 @@ document.documentElement.style.setProperty( '--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`); ``` -The progress indicator is implemented in HTML in the `wwwroot/index.html` file: +The progress indicators are implemented in HTML in the `wwwroot/index.html` file: ```html @@ -750,7 +750,7 @@ The progress indicator is implemented in HTML in the `wwwroot/index.html` file:
``` -To review the Blazor WebAssembly project template markup and styling for the default progress indicator, see the ASP.NET Core reference source: +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) From 18f259e91a23979361dba975cff0f2dfb11f64f3 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 16 Aug 2022 03:55:51 -0500 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/fundamentals/startup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md index fda00b95a22f..256d6b00b4ed 100644 --- a/aspnetcore/blazor/fundamentals/startup.md +++ b/aspnetcore/blazor/fundamentals/startup.md @@ -729,7 +729,7 @@ Using the preceding CSS variables, you can create custom progress indicators tha In the following example: -* `resourcesLoaded` is a count of the resources loaded at any given time during app startup. +* `resourcesLoaded` is an instantaneous count of the resources loaded during app startup. * `totalResources` is the total number of resources to load. ```javascript