wixy
/
Sinet.Universal.Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加Loading界面

This commit is contained in:
wangyu 2023-11-15 09:36:28 +08:00
parent b9282ea420
commit e3aff227bc
5 changed files with 87 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/Sinet.Universal.Admin.Client/wwwroot/index.html
View File

@ -14,11 +14,10 @@
<link href="css/fontawesome/v6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<body class="preloadbody">
<div class="status-bar-safe-area"></div>
<div id="app">Loading...</div>
<div id="app" class="loader"></div>
<div id="blazor-error-ui">
An unhandled error has occurred.
@ -27,6 +26,7 @@
</div>
<script src="_framework/blazor.webview.js"></script>
<script src="js/app.js"></script>
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
<script src="js/echarts/5.1.1/echarts.min.js"></script>

13
src/common/Sinet.Universal.Admin.RCL/App.razor
View File

@ -30,7 +30,9 @@
</CascadingAuthenticationState>
</MErrorHandler>
@code{
@code {
[Inject]
private IJSRuntime _jsRuntime { get; set; }
[Inject]
IAppService appService { get; set; }
@ -46,6 +48,15 @@
base.OnInitialized();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await _jsRuntime.InvokeAsync<string>("app.loadingStop");
}
await base.OnAfterRenderAsync(firstRender);
}
private void OnHandle(Exception exception)
{
_exception = exception;

58
src/common/Sinet.Universal.Admin.RCL/wwwroot/css/site.css
View File

@ -1,3 +1,61 @@
.preloadbody {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
font-size: 10px;
margin-top: -30px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(50,108,243, 0.2);
border-right: 1.1em solid rgba(50,108,243, 0.2);
border-bottom: 1.1em solid rgba(50,108,243, 0.2);
border-left: 1.1em solid #326cf3;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader > * {
display: none;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;

9
src/common/Sinet.Universal.Admin.RCL/wwwroot/js/app.js Normal file
View File

@ -0,0 +1,9 @@
window.app = {
loadingStart: () => {
document.getElementById("app").classList.add("loader")
},
loadingStop: () => {
document.getElementById("app").classList.remove("loader")
document.body.classList.remove('preloadbody');
}
}

7
src/server/Sinet.Universal.Admin.Server.Host/Pages/_Host.cshtml
View File

@ -30,9 +30,11 @@
<link href="css/fontawesome/v6.4.0/css/all.min.css" rel="stylesheet">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body class="abp-application-layout bg-light @rtl">
<body class="abp-application-layout bg-light @rtl preloadbody">
<component type="typeof(Sinet.Universal.Admin.RCL.App)" render-mode="Server" />
<div id="app" class="loader">
<component type="typeof(Sinet.Universal.Admin.RCL.App)" render-mode="Server" />
</div>
<div id="blazor-error-ui">
<environment include="Staging,Production">
@ -47,6 +49,7 @@
@* <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" /> *@
<script src="_framework/blazor.server.js"></script>
<script src="js/app.js"></script>
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
<script src="js/echarts/5.1.1/echarts.min.js"></script>
</body>