为网站加入Loading加载页 | Add loading page to your site > 火星格

本期教程介绍一下用CSS制作网站加载页面，并且用js来控制加载时间，以及怎样退出加载页面的方法。

This tutorial introduces how to create a loading page using CSS, and uses js to control the time that the loading page displays, and how to exit the loading page.

目录 / LIST

新建CSS文件 | New CSS file

添加HTML代码 | Add HTML code

配置JS函数 | JS function config

# 新建CSS文件 | New CSS file

在Hugo主题文件夹下的static/assets文件夹下新建一个loading.css文件，把下面的代码拷进去。
Create a loading.css file in the static/assets folder under the Hugo theme folder and copy the code below.

/* loading */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    overflow: hidden;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #4285f4;
    border-bottom-color: #4285f4;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    z-index: 1001;
    
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
 
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
 
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

#loader-wrapper .loader-section {
    position: fixed;
    left: 0;
    width: 100%;
    height: 51%;
    background: #f2f2f2;
    z-index: 1000;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#loader-wrapper .loader-section.section-top {
    top: 0
}
 
#loader-wrapper .loader-section.section-bottom {
    bottom: 0
}
 
.loaded #loader-wrapper .loader-section.section-top {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all .5s cubic-bezier(0.645,0.045,0.355,1.000);
    transition: all .5s cubic-bezier(0.645,0.045,0.355,1.000)
}
 
.loaded #loader-wrapper .loader-section.section-bottom {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all .5s cubic-bezier(0.645,0.045,0.355,1.000);
    transition: all .5s cubic-bezier(0.645,0.045,0.355,1.000)
}

.loaded #loader-wrapper {
    visibility: hidden;
}
.loaded .loader {
    opacity: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

CSS文件里面定义了loading页面的背景，loader大环以及它的动画，还有加载完毕消失时的动作。
The CSS file defines the background of the loading page, the loader and its animation, and the actions when loaded.

# 添加HTML代码 | Add HTML code

接下来需要把loader写进HTML里，打开Hugo主题文件夹下的layoust/_default文件夹下的baseof.html文件，把下面的代码拷进到<body>和</body>之间。
Next, you need to write the loader into HTML, open the baseof.html file in the layoust/_defalt folder under the Hugo theme folder, and copy the following code between <body> and </body >.

<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-top"></div>
    <div class="loader-section section-bottom"></div>
</div>

然后把上一步创建的CSS文件引入到Head中，打开Hugo主题文件夹下的layoust/partials文件夹下的head.html文件，把下面的代码拷进去。
Then include the CSS file created in the previous step into the Head, open the head.html file in the layoust/partials folder under the Hugo theme folder, and copy the code below.

<link rel="stylesheet" href="{{ "assets/loading.css" | absURL }}"/>

# 配置JS函数 | JS function config

再回到Hugo主题文件夹下的layoust/_default文件夹下的baseof.html文件，把下面的代码拷进到<body>和</body>之间，放在<div id="loader-wrapper">...</div>之后。
Go back to the baseof.html file in the layoust/_default folder under the Hugo theme folder and copy the following code between <body> and </body> and after <div id="loader-wrapper">...</div>

<script type="text/javascript">
    window.onload = function () { document.body.className += ' loaded'; };
    window.setTimeout(function () { document.body.className += ' loaded'; }, 1500);
</script>

这条JS是用来控制加载页消失时间的，其中第一条的意思是，页面中所有的元素加载完毕后就将加载页移除。而第二条并列的意思是给加载页设置一个1500ms的倒计时，在这个时间之后将加载页移除。
这样做既能保证不至于因网络条件不好导致加载时间过长从而引起加载页呆的时间太久，也不会造成返回已经加载好的页面时加载页出现的时间过长。
This JS is used to control the time when the loading page should disappear. The first one means when all the elements in the page are loaded, remove the loading page. In the meantime, a 1500ms countdown is set to the loading page, after which the loading page is removed.
This can not only ensure that the loading time is too long due to poor network conditions, causing the loading page to stay too long, and it will not cause the loading page to appear too long when returning already loaded pages.

END

• 本文作者 | Author info >> MAXH

• 来源链接 | Source link >> 为网站加入Loading加载页 | Add loading page to your site

• 发表评论 | Make comments >>