diff --git a/demo/WasmHost/App.razor b/demo/WasmHost/App.razor index 179619d..732c1ac 100644 --- a/demo/WasmHost/App.razor +++ b/demo/WasmHost/App.razor @@ -1,13 +1,15 @@ <LazyRouter AppAssembly="@typeof(Program).Assembly"> <Loading Context="moduleName"> <LayoutView Layout="@typeof(MainLayout)"> - <div class="pureCenter full light"> + <div class="pureCenter full light fadein"> <div class="loader light"></div> </div> </LayoutView> </Loading> <Found Context="routeData"> - <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> + <LayoutView Layout="@typeof(MainLayout)"> + <RouteView RouteData="@routeData" /> + </LayoutView> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> diff --git a/demo/WasmHost/Pages/Counter.razor b/demo/WasmHost/Pages/Counter.razor index 392bba1..5aa971f 100644 --- a/demo/WasmHost/Pages/Counter.razor +++ b/demo/WasmHost/Pages/Counter.razor @@ -1,5 +1,9 @@ @page "/counter" + <div class="pureCenter full light fadein"> + <div class="loader"></div> + </div> + <h1>Counter</h1> <p>Current count: @currentCount</p> diff --git a/demo/WasmHost/wwwroot/css/global.css b/demo/WasmHost/wwwroot/css/global.css index edddf53..9368711 100644 --- a/demo/WasmHost/wwwroot/css/global.css +++ b/demo/WasmHost/wwwroot/css/global.css @@ -32,16 +32,16 @@ top:0; left:0; width: 100%; height: 100%; - background-color: black; - color: white; } .full.dark { - background-color: black; + backdrop-filter: blur(4px); + background-color: rgba(0,0,0,0.8); color: white; } .full.light { - background-color: white; + backdrop-filter: blur(4px); + background-color: rgba(255,255,255,0.8); color: black; } diff --git a/demo/WasmHost/wwwroot/css/loader.css b/demo/WasmHost/wwwroot/css/loader.css index 307e4a4..2496e6e 100644 --- a/demo/WasmHost/wwwroot/css/loader.css +++ b/demo/WasmHost/wwwroot/css/loader.css @@ -5,7 +5,6 @@ width: 3em; height: 3em; - -webkit-animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite; /* Safari */ animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite; } @@ -17,17 +16,6 @@ color: white; } -/* Safari */ -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - } -} - @keyframes spin { 0% { transform: rotate(0deg); @@ -37,3 +25,17 @@ transform: rotate(360deg); } } + +.fadein { + animation: fadein ease; + animation-duration: 2s; +} + +.fadein.fast { + animation-duration: 0.3s; +} + +@keyframes fadein { + 0% { opacity: 0; } + 100% { opacity: 1; } +}