Upgraded from NET 6.0 to NET 7.0 and added loading circle

This commit is contained in:
BOT Alex 2023-07-14 20:58:26 +08:00
parent 5d72c2d2e5
commit 808299c61b
3 changed files with 48 additions and 6 deletions

View file

@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup> <PropertyGroup>
<TargetFramework>net6.0</TargetFramework> <TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable> <Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings> <ImplicitUsings>enable</ImplicitUsings>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest> <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
@ -10,10 +10,10 @@
<ItemGroup> <ItemGroup>
<PackageReference Include="Blazored.LocalStorage" Version="4.3.0" /> <PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.19" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.9" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.19" PrivateAssets="all" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.9" PrivateAssets="all" />
<PackageReference Include="Microsoft.NET.Build.Containers" Version="7.0.305" /> <PackageReference Include="Microsoft.NET.Build.Containers" Version="7.0.306" />
<PackageReference Include="MudBlazor" Version="6.5.0" /> <PackageReference Include="MudBlazor" Version="6.7.0" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" /> <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<PackageReference Include="Toolbelt.Blazor.SpeechSynthesis" Version="10.0.0" /> <PackageReference Include="Toolbelt.Blazor.SpeechSynthesis" Version="10.0.0" />
<PackageReference Include="UnidecodeSharpFork" Version="1.0.0" /> <PackageReference Include="UnidecodeSharpFork" Version="1.0.0" />

View file

@ -62,3 +62,38 @@ a, .btn-link {
.blazor-error-boundary::after { .blazor-error-boundary::after {
content: "An error has occurred." content: "An error has occurred."
} }
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
background-color: dimgray;
border-radius: 5em;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
color: aliceblue;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}

View file

@ -15,7 +15,14 @@
</head> </head>
<body> <body>
<div id="app">Loading...</div> <div id="app">
<div style="background-color:#292929; height: 100vh; width:100vw; position:absolute;"/>
<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>
</div>
<div id="blazor-error-ui"> <div id="blazor-error-ui">
An unhandled error has occurred. An unhandled error has occurred.