wp_enqueue_script('jquery');
2. Adım: Style.css dosyasını açıp aşağıdaki kodları dilediğiniz yere yapıştırın.
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
3. Adım: Header.php’yi açın ve aşağıdaki kodu head tagından önce yapıştırın
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>