添加Loading界面
This commit is contained in:
parent
b9282ea420
commit
e3aff227bc
|
|
@ -14,11 +14,10 @@
|
||||||
<link href="css/fontawesome/v6.4.0/css/all.min.css" rel="stylesheet">
|
<link href="css/fontawesome/v6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="preloadbody">
|
||||||
|
|
||||||
<div class="status-bar-safe-area"></div>
|
<div class="status-bar-safe-area"></div>
|
||||||
|
|
||||||
<div id="app">Loading...</div>
|
<div id="app" class="loader"></div>
|
||||||
|
|
||||||
<div id="blazor-error-ui">
|
<div id="blazor-error-ui">
|
||||||
An unhandled error has occurred.
|
An unhandled error has occurred.
|
||||||
|
|
@ -27,6 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="_framework/blazor.webview.js"></script>
|
<script src="_framework/blazor.webview.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
|
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
|
||||||
<script src="js/echarts/5.1.1/echarts.min.js"></script>
|
<script src="js/echarts/5.1.1/echarts.min.js"></script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,9 @@
|
||||||
</CascadingAuthenticationState>
|
</CascadingAuthenticationState>
|
||||||
</MErrorHandler>
|
</MErrorHandler>
|
||||||
|
|
||||||
@code{
|
@code {
|
||||||
|
[Inject]
|
||||||
|
private IJSRuntime _jsRuntime { get; set; }
|
||||||
|
|
||||||
[Inject]
|
[Inject]
|
||||||
IAppService appService { get; set; }
|
IAppService appService { get; set; }
|
||||||
|
|
@ -46,6 +48,15 @@
|
||||||
base.OnInitialized();
|
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)
|
private void OnHandle(Exception exception)
|
||||||
{
|
{
|
||||||
_exception = exception;
|
_exception = exception;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
#blazor-error-ui {
|
||||||
background: lightyellow;
|
background: lightyellow;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -30,9 +30,11 @@
|
||||||
<link href="css/fontawesome/v6.4.0/css/all.min.css" rel="stylesheet">
|
<link href="css/fontawesome/v6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
|
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
|
||||||
</head>
|
</head>
|
||||||
<body class="abp-application-layout bg-light @rtl">
|
<body class="abp-application-layout bg-light @rtl preloadbody">
|
||||||
|
|
||||||
|
<div id="app" class="loader">
|
||||||
<component type="typeof(Sinet.Universal.Admin.RCL.App)" render-mode="Server" />
|
<component type="typeof(Sinet.Universal.Admin.RCL.App)" render-mode="Server" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="blazor-error-ui">
|
<div id="blazor-error-ui">
|
||||||
<environment include="Staging,Production">
|
<environment include="Staging,Production">
|
||||||
|
|
@ -47,6 +49,7 @@
|
||||||
|
|
||||||
@* <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" /> *@
|
@* <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" /> *@
|
||||||
<script src="_framework/blazor.server.js"></script>
|
<script src="_framework/blazor.server.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
|
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
|
||||||
<script src="js/echarts/5.1.1/echarts.min.js"></script>
|
<script src="js/echarts/5.1.1/echarts.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue