botalex/LearnCChar1.0
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upgraded from NET 6.0 to NET 7.0 and added loading circle

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
CCharLearn/CCharLearn.csproj
View file

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

35
CCharLearn/wwwroot/css/app.css
View file

@ -62,3 +62,38 @@ a, .btn-link {
.blazor-error-boundary::after {
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");
}

9
CCharLearn/wwwroot/index.html
View file

@ -15,7 +15,14 @@
</head>
<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">
An unhandled error has occurred.