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加載動畫 - 牛譯偉