LoadingExample2.razor

@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
        <MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
            <MudLoading @bind-Loading="_loading">
                <LoaderContent>
                    <div class="mud-width-full mud-height-full d-flex flex-column align-center justify-center">
                        <MudStack Row="true" Spacing="2">
                            <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" Size="Size.Small" />
                            <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" Size="Size.Medium" />
                            <MudIcon Class="loading-ani-example" Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Primary" Size="Size.Large" />
                            <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" Size="Size.Medium" />
                            <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" Size="Size.Small" />
                        </MudStack>
                                
                    </div>
                </LoaderContent>
                <ChildContent>
                    <MudText Class="pa-4">This is a text inside a paper.</MudText>
                </ChildContent>
                        
            </MudLoading>
        </MudPaper>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack>
            <MudSwitchM3 @bind-Value="_loading" Color="Color.Secondary">Loading</MudSwitchM3>
        </MudStack>
    </MudItem>
</MudGrid>

<MudAnimate Selector=".loading-ani-example" AnimationType="AnimationType.Rotate" Value="360" ValueSecondary="0" Duration="1" Infinite="true" />

@code {
    bool _loading = true;
}