Agregar animación CSS como Preloader a WordPress

2

Encontré un fragmento de animación CSS en Codepen , y me gustaría agregarlo en mi sitio de WordPress para una animación de precarga pero no pude encontrar ninguna ayuda o complemento relacionado que me permitiera agregar un precargador con animación CSS personalizada.

Intenté buscar en Google, pero todo lo que pude encontrar fueron complementos que aceptan "animación GIF" para la animación del precargador. Pero, quiero usar "animación CSS" en lugar de "animación GIF".

¿Alguna sugerencia?

P.S. Solo tengo un conocimiento moderado de WordPress.

    
pregunta Snazzy Sanoj 14.12.2015 - 17:35

1 respuesta

4

Puedes lograr esto configurando una clase en el cuerpo y eliminándola con JS cuando se carga la página. Este es solo un ejemplo básico, pero funcionará de manera inmediata.

 // Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
    // add 'class-name' to the $classes array
    $classes[] = 'preloader-visible';
    // return the $classes array
    return $classes;
}

// Add preloader style
add_action('wp_head', function(){ ?>
  <style>
    /** let's every child  of body know there is a loader visible */
    body.preloader-visible {
      background:red;
    }

    /** by default loader is hidden */
    body > .loader {
       display:none;
    }

    /** when loader is active the loader will show */
    body.preloader-visible > .loader {
       display:block;
    }
  </style>
  <?php
});

// Remove preloader when document is ready
add_action('wp_footer', function(){ ?>
  <script>
    (function($){

      $(function () {

          $('body').removeClass('preloader-visible');

      });

    })(jQuery);
  </script>
  <?php
});
    
respondido por el jgraup 14.12.2015 - 19:19

Lea otras preguntas en las etiquetas