Share code tạo hiệu ứng Loading trước khi hiển thị nội dung trang cho Xenforo.

Tiếp tục vọc vạch rồi lại tiếp tục thấy hay nên chia sẽ cho mọi người cùng dùng hihi:
Cái này là dùng Script để tạo 1 trang Loading trước khi hiển thị nội dụng trang.
Demo thì xem ở đây: http://www.zshare.vn
Giờ bắt đầu thêm vào website như sau:
Trước tiên thêm đoạn Script này trên thẻ </head> trong template PAGE_CONTAINER:

Mã:

<script src="js/modernizr.custom.js"></script>

Sau đó thêm dưới thẻ </head> code sau:

Mã:

<div id="ip-container" class="ip-container">
            <header class="ip-header">
                <div class="ip-loader">
                    <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
                        <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                        <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                    </svg>
                </div>
            </header>

Kéo xuống cuối cùng của template PAGE_CONTAINER thêm trên thẻ </body>:

Mã:

        </div>
        <script src="js/classie.js"></script>
        <script src="js/pathLoader.js"></script>
        <script src="js/main.js"></script>

Tiếp theo mở Template EXTRA.CSS thêm mã CSS này:

Mã:

.ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 460px;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
}

.ip-header h1 {
    margin: 0;
}

.ip-logo,
.ip-loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.ip-logo {
    top: 0;
    height: 100%;
    -webkit-transform: translate3d(0,25%,0);
    transform: translate3d(0,25%,0);
}

.ip-loader {
    top: 50%;
}

.ip-header .ip-inner {
    display: block;
    margin: 0 auto;
}

.ip-header .ip-logo svg {
    position: absolute;
    min-height: 200px;
    height: 25%;
}

.loaded .ip-header .ip-logo svg {
    max-height: 300px;
}

.ip-header .ip-logo svg path {
    fill: #1c9ccd;
}

.ip-header .ip-loader svg path {
    fill: none;
    stroke-width: 6;
}

.ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #ddd;
}

.ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #1c9ccd;
}

/* Content */
.ip-main {
    overflow: hidden;
    margin: 0 auto;
    padding: 160px 0 10em 0;
    max-width: 1100px;
    width: 90%;
}

.ip-main h2 {
    margin: 0;
    padding: 0.5em 0 1em;
    color: #1c9ccd;
    text-align: center;
    font-size: 4.25em;
    font-size: 4vw;
    line-height: 1;
}

.browser {
    margin: 0 auto;
    padding-top: 8%;
    min-height: 400px;
    max-width: 1000px;
    width: 100%;
    border-radius: 8px;
    background: #fff url(../img/browser.png) no-repeat 50% 0;
    background-size: 100%;
    color: #d3d3d3;
}

.box {
    float: left;
    padding: 3.5em;
    width: 33.3%;
    font-size: 0.7em;
    line-height: 1.5;
}

.box p {
    font-family: 'Blokk', Arial, sans-serif;
}



.icon-bell:before {
    content: "\e006";
}

.icon-cog:before {
    content: "\e023";
}

.icon-heart:before {
    content: "\e024";
}

/* Animations */

/* Initial animation of header elements */
.loading .ip-logo,
.loading .ip-loader {
    opacity: 1;
}

.loading .ip-logo {
    -webkit-animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
    animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLogo {
    from { opacity: 0; }
}

@keyframes animInitialLogo {
    from { opacity: 0; }
}

.loading .ip-loader {
    -webkit-animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
    animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLoader {
    from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); }
}

@keyframes animInitialLoader {
    from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); }
}

/* Header elements when loading finishes */
.loaded .ip-logo,
.loaded .ip-loader {
    opacity: 1;
}

.loaded .ip-logo {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLogo {
    to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

@keyframes animLoadedLogo {
    to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

.loaded .ip-loader {
    -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
    to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
    to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* Change the color of the logo */
.loaded .ip-logo svg path {
    -webkit-transition: all 0.5s ease 0.3s;
    transition: all 0.5s ease 0.3s;
    fill: #fff;
}

/* Header animation when loading finishes */
.loaded .ip-header {
    -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
    to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
    to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}

/* Content animations */
.loaded .ip-main h2,
.loaded .ip-main .browser,
.loaded .ip-main .browser .box,
.loaded .codrops-demos {
    -webkit-animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
    animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loaded .ip-main h2,
.loaded .ip-main .browser .box:first-child {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.loaded .codrops-demos,
.loaded .ip-main .browser .box:nth-child(2) {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.loaded .ip-main .browser .box:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes animLoadedContent {
    from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); }
}

@keyframes animLoadedContent {
    from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); transform: scale3d(0.3,0.3,1); }
}

/* Change layout class for header */
.layout-switch .ip-header {
    position: absolute;
}

/* No JS */
.no-js .ip-header {
    position: relative;
    min-height: 0px;
}

.no-js .ip-header .ip-logo {
    margin-top: 20px;
    height: 180px;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.no-js .ip-header .ip-logo svg path {
    fill: #fff;
}

/* Media queries */

@media screen and (max-width: 45em) {

    .ip-main h2 {
        font-size: 2.25em;
        font-size: 10vw;
    }

    .box {
        width: 100%%;
    }

}

Cuối cùng là Download các file js phía dưới, upload lên thư mục js của Xenforo.
P/S: học về mình sẽ share thêm code tạo khung đăng nhập vào đăng kí ngoài sidebar, dùng CSS3 va HTML5 cho mọi người dùng hihi.

 

Có cách nào chỉ load 1 lần khi vào trang k bác , cái này click vào đâu nó cũng load

 

Hay hay và lạ mắt làm mình click gần chục bài viết bên đó luôn

 

Cũng hay đây

 

Vừa làm xong load ra trang trắng tinh luôn. dù ao cũng cám ơn bác nhiều nha

 

Đánh dấu

 

Cái này mình chưa ngâm cứu hihi.
Bạn thử thêm code vào template khác ví dụ như muốn chỉ loading ở trang chủ thì bạn thêm vào EWRporta_Portal thay vì là PAGE_CONTAINER

 

Spam hả bạn?

 

Ngoài xenforo ra thì còn dùng cho wordpress,vbb.... đc ko bạn

 

Được hết bạn, miển là bạn add vào đúng template để cho nó loading là được.

 

Cũng hay, để áp dụng xem sao

 

hay nè