it-swarm.com.de

Fügen Sie eine CSS-Animation als Preloader zu WordPress hinzu

Ich habe auf Codepen ein CSS-Animations-Snippet gefunden und möchte es auf meiner WordPress-Site für Preloader-Animationen hinzufügen, konnte jedoch keine zugehörige Hilfe oder kein zugehöriges Plugin finden, mit dem ich einen Preloader mit benutzerdefinierter CSS-Animation hinzufügen könnte .

Ich habe versucht, zu googeln, aber alles, was ich finden konnte, waren Plugins, die "GIF-Animation" für Preloader-Animation akzeptieren. Aber ich möchte "CSS-Animation" anstelle von "GIF-Animation" verwenden.

Irgendwelche Vorschläge?

P.S. Ich habe nur mäßige Kenntnisse in WordPress.

2
Snazzy Sanoj

Sie können dies erreichen, indem Sie eine Klasse für den Body festlegen und diese mit JS entfernen, wenn die Seite geladen wird. Dies ist nur ein einfaches Beispiel, aber es wird sofort funktionieren.

 // 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
});
4
jgraup