Hướng dẫn cách làm
Anh em cho toàn bộ code bên dưới vào sau thẻ <body>
<style>
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#eceff1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-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)}}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.progress{background-color:rgba(255,64,129,0.22)}</style>
<div id='loader-wrapper'><div id='loader'/><div class='loader-section section-left'/><div class='loader-section section-right'/></div>
<script type='text/javascript'>
// Effect
$(function() {
var ink, d, x, y;
$(".ripple").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
});
// Smooth Images
$(".post-author img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/s50-c/"))});
$(".tanggalx img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/s40-c/"))});
// Loader
$(window).bind("load",function(){$("#loader-wrapper").fadeOut(1e3)});
//]]>
</script>
Lưu lại và tận hưởng
Mình xin share bộ theme mà mình rip ( phần 1 ) đây là 1/3 trong số theme của mình.
đẹp lắm anh
Trả lờiXóatks bạn
XóaWtf, bài tổng hợp temp đây rồi??
Trả lờiXóa:v link dưới đó là tổng hợp á
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóa:))) Đâu ạ ? xin cái nguồn ?
Xóa:)) vào folder xem lại đi pro
Xóa:3 một vài rip, một vài share chứ không phải tất cả nhé
XóaĐm temp blogger của Sơn à
Trả lờiXóaTemp blogger của Sơn ?
XóaChưa test, nhưng mà cái temp tên theme blogger là vủa me à
XóaChất
Trả lờiXóakhá lắm ey
Trả lờiXóaCái Phần Loading Này Của Tôi Mà Ông .
Trả lờiXóa:3 Đây là loading của temp bên ID Blanter nhé
Xóa