• Invitado conoce más sobre nuestra nueva versión 👉 NOVEDADES. No olvides dejarnosce una Review en Apklis 📱👉 REVIEW 

Añadir un preloader a tu foro

Lucien

Entropía
Administrador
‏‏‎ ‎Mensajes‏‏‎ ‎
234
Reacciones
661
Oro
28.460
En la plantilla PAGE_CONTAINER , añadir esto luego de
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 {

}
 

¡Hola forero! 😀 Recuerda que Universum no es un chat, acá apostamos por las publicaciones de alta calidad, por lo que deberás argumentar tus respuestas, de no hacerlo lo más probable es que tu mensaje no sea aprobado por uno de nuestros moderadores. 😢

Arriba