WordPressの読み込み時にロード中なのがわかるように、グルグル回転するようなエフェクトを実装したいなーと思いました。
プラグインで実装するのが簡単そうです。
Page Loading Effects
Page Loading Effectsというプラグインを使うと簡単に実装できます。
Preloaderのほうが人気でこっちにしようと思ってたのですが、これは動作しなかったです。
他の方法
本当はhttp://freefrontend.com/css-loaders/を設置したかったのですが、できなかったので諦めました。
<!-- 読み込みスピナー -->
<script type="text/javascript">
$("#showspin").on("click", function(){
$("somediv .spinner").show();
});
</script>
<style media="screen">
.spinner {
background: url('/wp-admin/images/wpspin_light.gif') no-repeat;
background-size: 16px 16px;
display: none;
float: right;
opacity: .7;
filter: alpha(opacity=70);
width: 16px;
height: 16px;
margin: 5px 5px 0;
}
</style>
<div class="spinner"></div>
とか
<!-- 読み込みスピナー -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script type="text/javascript">
//paste this code under the head tag or in a separate js file.
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
<style media="screen">
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
</style>
<div class="se-pre-con"></div>
で実装できると思ってたんですが、できませんでした。