Blazor 修仙之旅 - 啟動頁

一.前言

APP 啟動圖，對於大家來說一定不陌生，它除了加載廣告等信息，還有一個作用就是讓APP有時間后台加載資源並渲染界面，以便啟動圖結束后給你展現的是一個渲染好的界面，提升體驗。對於 SPA 的 Web 應用程序來說，一般也會有一個啟動頁，因為 SAP 應用程序第一次加載的時候，會加載很多資源，就可能會造成第一次打開白屏時間比較長，這個時候就可以做一個啟動頁面，等資源加載完成，頁面渲染好以后關閉啟動頁面，給予用戶更好的體驗。

Ant Design Pro 的啟動頁：

二.探索 Blazor 的啟動頁

Blazor 如何設置啟動頁，這個在官方文檔目前也沒有相關資料，不過我發現我們在F5調試的時候，打開瀏覽器時，左上角會有短暫的 “Loading...” 文字，然后才進入首頁，此時便有一個思路，將這個 “Loading...” 替換為動畫不就行了。

經過搜索，找到 “Loading...” 存在於 index.html

三.實現啟動頁

打開 index.html 文件。

添加 CSS 樣式：

<style>
        .loader {
            /* animation-name:load; */
            animation: load 2s linear infinite;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #2e8e9a;
            height: 100px;
            width: 100px;
            margin: 0 auto;

        }

        @keyframes load {
            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }
        }
    </style>

替換 Loading:

<app>
    <div class="loader"></div>
</app>

運行：

可以看到簡單的啟動加載動畫已經實現了，達到了我們想要的效果。（調了半天，想弄得高大上點，無奈css太菜，懶得折騰了后面在搞吧）

四.參考資料

• CSS加載動畫 - 牛譯偉