Add a load progress example

[guardrex]

Add a 2nd example: Use --blazor-load-percentage with a CSS var, as Steve shows in the .NET Conf presentation.

.linear-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

.linear-progress:after {
    content: '';
    position: absolute;
    inset: 0;
    background: blue;
    scale: var(--blazor-load-percentage, 0%) 100%;
    transform-origin: left top;
    transition: scale ease-out 0.5s;
}

<div id="app">
    <div class="linear-progress"></div>
</div>

---

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: ad891f84-d11e-e334-fcdc-b55c5171fca4
• Version Independent ID: 11f8db3d-9988-e0a1-89c5-c3552ee47b93
• Content: ASP.NET Core Blazor startup
• Content Source: aspnetcore/blazor/fundamentals/startup.md
• Product: aspnet-core
• Technology: aspnetcore-fundamentals
• GitHub Login: @guardrex
• Microsoft Alias: riande