默认的 index.html 显示的 Loading 太简陋了. 而且没有加载进度条.
所以做了一个.
代码地址 : https://github.com/BlazorPlus/BlazorDemoWasmLoading
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>BlazorDemoWasmLoading</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="manifest.json" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> </head> <body> <app> <div style="position:fixed;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;"> <svg version=‘1.1‘ xmlns=‘http://www.w3.org/2000/svg‘ x=‘0px‘ y=‘0px‘ width=‘80px‘ height=‘80px‘ viewBox=‘0 0 40 40‘ enable-background=‘new 0 0 40 40‘ xml:space=‘preserve‘> <path opacity=‘0.2‘ fill=‘#000‘ d=‘M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z‘></path> <path fill=‘#000‘ d=‘M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z‘ transform=‘rotate(228 20 20)‘> <animateTransform attributeType=‘xml‘ attributeName=‘transform‘ type=‘rotate‘ from=‘0 20 20‘ to=‘360 20 20‘ dur=‘0.5s‘ repeatCount=‘indefinite‘></animateTransform> </path> </svg> <div style="height:30px"> Loading.. </div> <div id="progressbar" style="display: inline-block; width: 260px; height: 12px; border: solid 1px gray; border-radius:6px; position: relative;"></div> </div> </app> <script type="text/javascript"> var preLoadStart = 0; var preLoadCount = 0; var preLoadError = 0; var preLoadFinish = 0; function preLoadResource(dllname) { preLoadCount++; var xh = new XMLHttpRequest(); xh.open("GET", dllname, true); xh.onload = function () { preLoadFinish++; if (xh.status != 200) preLoadError++; console.log(preLoadFinish + "/" + preLoadCount, dllname); var progressbar = document.getElementById("progressbar"); if (progressbar) { progressbar.innerHTML = "<span style=‘position:absolute;left:0;background-color:darkgreen;height:10px;border-radius:5px;width:" + (progressbar.offsetWidth * preLoadFinish / preLoadCount) + "px‘></span>"; } if (preLoadFinish == preLoadCount) { var span = new Date().getTime() - preLoadStart; console.log("All Done In " + span + " ms , " + preLoadError + " errors"); } } xh.send(""); } function preLoadAll() { preLoadStart = new Date().getTime(); var xh = new XMLHttpRequest(); xh.open("GET", "_framework/blazor.boot.json", true); xh.onload = function () { var res = JSON.parse(xh.responseText); console.log(res); for (var p in res.resources.assembly) preLoadResource("_framework/_bin/" + p); for (var p in res.resources.runtime) preLoadResource("_framework/wasm/" + p); preLoadResource("_framework/blazor.webassembly.js"); } xh.send(""); } preLoadAll(); </script> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">??</a> </div> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register(‘service-worker.js‘);</script> </body> </html>
挺简单的. <app> 里的东西在 wasm 加载完毕后就会被清楚啦.
[Asp.Net Core] Blazor WebAssembly - 改造 Loading... 界面
原文：https://www.cnblogs.com/zhgangxuan/p/12932243.html