Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blazor WASM loading progress indicator #26744

Merged
merged 3 commits into from
Aug 16, 2022
Merged

Blazor WASM loading progress indicator #26744

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6582eca
Blazor WASM loading progress indicator
guardrex Aug 15, 2022
4f6eb71
Updates
guardrex Aug 16, 2022
18f259e
Updates
guardrex Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions aspnetcore/blazor/fundamentals/startup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down