[Thùng rác] KLoading Styles

Code Info:
Code Name: KLoading Style
Write by: K.
Copyright ®: K. - DEVs
Demo Code: Mod: KLoadingStyle by K. - Devs

Insert into your CSS (Chèn vào CSS):

Code:

#Kload{-moz-opacity:0.8;-webkit-opacity:0.8;background:black;filter:Alpha(opacity=80);min-height:100%;left:0;opacity:0.8;position:fixed;top:0;width:100%;z-index:999;text-align:center}
.Kloadingstyle{display:inline-block;margin:30% auto;border-width:30px;border-radius:50%;-webkit-animation:spin 1s linear infinite;-moz-animation:spin 1s linear infinite;-o-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;border-style:double;border-color:#444 transparent;}
@-webkit-keyframes spin{100%{-webkit-transform:rotate(359deg)}}
@-moz-keyframes spin{100%{-moz-transform:rotate(359deg)}}
@-o-keyframes spin{100%{-moz-transform:rotate(359deg)}}
@keyframes spin{100%{transform:rotate(359deg)}}

And Insert to header or fotter (Và thêm vào Header hoặc Fotter):

Code:

<script>document.write('<div id="Kload"><div class="Kloadingstyle"></div></div>');
$(function(){ setTimeout(function() {document.getElementById('Kload').style.display = 'none';}, 1000); });</script>

Các style:
Spinner: [Only admins are allowed to see this link]
Facebook: [Only admins are allowed to see this link]

all ver hả kazu?

Style Spinner:

Demo: [Only admins are allowed to see this link]

Thay CSS ở trên bằng CSS này:

Code:

#Kload{-moz-opacity:0.8;-webkit-opacity:0.8;background:black;filter:Alpha(opacity=80);min-height:100%;left:0;opacity:0.8;position:fixed;top:0;width:100%;z-index:999;text-align:center}
.Kloadingstyle{width:30px;height:30px;border:5px solid #ccc;position:fixed;left:50%;margin-left:-20px;top:50%;margin-top:-20px;border-radius:50%}
.Kloadingstyle:after{content:'';position:absolute;width:40px;height:10px;background:#262526;top:10px;left:-5px;animation:spin 1.2s infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

trag chưa load xong thì cái này đã mất hả Ka. , demo : [Only admins are allowed to see this link]
cái like fan page chưa load ra thì cái đó đã mất , hay nó chỉ dò những gì của forum còn cái bên ngoài thì không dò

Style Facebook:

Demo: [Only admins are allowed to see this link]

Thay CSS ở trên bằng CSS này:

Code:

#Kload{-moz-opacity:0.8;-webkit-opacity:0.8;background:black;filter:Alpha(opacity=80);min-height:100%;left:0;opacity:0.8;position:fixed;top:0;width:100%;z-index:999;text-align:center}
.Kloadingstyle{top:calc(50% - 5px);left:calc(50% - 5px);position:absolute !important}
.Kloadingstyle,.Kloadingstyle:before,.Kloadingstyle:after{position:relative;display:inline-block;width:20px;height:50px;background-color:rgba(215,230,240,0.9);border:1px solid rgb(215,230,240);z-index:100000;content:' ';margin-left:-5px;margin-right:-9px}
.Kloadingstyle:before{top:-11px;left:-100%;animation:loading-fb .8s cubic-bezier(.4,.5,.6,1) infinite}
.Kloadingstyle{animation:loading-fb-main .8s cubic-bezier(.4,.5,.6,1) .2s infinite}
.Kloadingstyle:after{top:-11px;right:-100%;margin-top:50%;animation:loading-fb .8s cubic-bezier(.4,.5,.6,1) .4s infinite}
@keyframes loading-fb{from{transform:scaleY(1.4);background-color:rgba(55,114,171,0.9);border:1px solid rgb(55,114,171)}}
@keyframes loading-fb-main{from{padding-top:10px;padding-bottom:10px;margin-top:-10px;background-color:rgba(55,114,171,0.9);border:1px solid rgb(55,114,171)}}

---

[Only admins are allowed to see this link]

anhoang_qn wrote:trag chưa load xong thì cái này đã mất hả Ka. , demo : [Only admins are allowed to see this link]
cái like fan page chưa load ra thì cái đó đã mất , hay nó chỉ dò những gì của forum còn cái bên ngoài thì không dò

1. Code Face nặng
2. Bỏ lược bỏ bớt những thứ không cần thiết phải load nhưng trình duyệt bắt buộc load
3. Do trình duyệt phải tải thêm.

Hay đấy, theo ý Ad thì chỉ share riêng HTML và CSS để làm nguyên liệu cho các mod cần hiệu ứng loading vì chẳng ai thích xem cái loading khi truy cập đâu, làm phí 1s trong khi nó không thật sự báo tình trạng loading.
Nên sửa chung vào post#1 để tiện theo dõi.