# 使用 pleaseWait JS 套件實作 SPA 讀取頁面
###### tags: `實作功能`

[Demo網站](https://pathgather.github.io/please-wait/)
[Demo網站下方的讀取動畫-SpinKit](https://tobiasahlin.com/spinkit/)

## JS

var loading_screen = pleaseWait({
                logo: "Images/csf.png",
                backgroundColor: '#78C2AD',
                loadingHtml: "<p class='loading-header'>題庫管理系統</p><div class='sk-cube-grid'><div class='sk-cube sk-cube1'></div><div class='sk-cube sk-cube2'></div><div class='sk-cube sk-cube3'></div><div class='sk-cube sk-cube4'></div><div class='sk-cube sk-cube5'></div><div class='sk-cube sk-cube6'></div><div class='sk-cube sk-cube7'></div><div class='sk-cube sk-cube8'></div><div class='sk-cube sk-cube9'></div></div>"
            });

## CSS

/* Please Wait 套件 */

.loading-message {
    color: white !important;
    font-family: MyCustomFont !important;
    font-weight: bold;
    font-size: 20pt;
}

.loading-header {
    color: white !important;
    font-family: MyCustomFont !important;
    font-weight: bold;
    font-size: 35pt;
}

@media (max-width:620px){
    .pg-loading-logo {
        width: 100%;
    }
}