En la plantilla PAGE_CONTAINER , añadir esto luego de
luego en extra.less añadir este codigo:
Code:
<body data-template="{$template}">
PHP:
<div class="universum-loader-wrapper">
<div class="universum-loader"></div>
<div class="universum-loader-section section-left"></div>
<div class="universum-loader-section section-right"></div>
</div>
<xf:js>
window.addEventListener('load',function(){
document.querySelector('body').classList.add("loaded")
});
</xf:js>luego en extra.less añadir este codigo:
CSS:
.universum-loader:before {
content:"";
position: absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
border:var(--line-width) solid transparent;
border-top-color: var(--inner-line-color);
border-radius:100%;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.universum-loader:after {
content:"";
position: absolute;
top:14px;
left:14px;
right:14px;
bottom:14px;
border:var(--line-width) solid transparent;
border-top-color: var(--middle-line-color);
border-radius:100%;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.universum-loader-wrapper .universum-loader-section {
position:fixed;
top:0;
background:@xf-paletteNeutral1;
width:51%;
height:100%;
z-index:1000;
}
.universum-loader-wrapper .universum-loader-section.section-left {
left:0
}
.universum-loader-wrapper .universum-loader-section.section-right {
right:0;
}
/* Loaded Styles */
.loaded .universum-loader-wrapper .universum-loader-section.section-left {
transform: translateX(-100%);
transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .universum-loader-wrapper .universum-loader-section.section-right {
transform: translateX(100%);
transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);
}
.loaded .universum-loader {
opacity: 0;
transition: all 0.3s ease-out;
}
.loaded .universum-loader-wrapper {
visibility: hidden;
transform:translateY(-100%);
transition: all .3s 1s ease-out;
}
.p-header-inner {
}
