Tạo Hiệu Ứng Loader Hoàn Toàn Bằng CSS Cho Blogspot | Gia Huy NY Blog

Chào mọi người, lúc nảy rảnh có lục cái mẫu php của thằng bạn thấy có cái hiệu ứng loader đẹp lắm, mình thấy nó hầu như làm bằng css nên không ảnh hưởng gì đến blog nên đem về share luôn. Nếu ai coder giỏi thì có thể lấy cái này làm hiệu ứng loading trang cho blog nhé.
Cách làm cũng khá đơn giản gồm 3 bước.
Bước 1: Login Blogger
Bước 2: Chèn Css Lên Trên ]]></b:skin>

.loader{top:calc(50% - 32px);left:calc(50% - 32px);width:80px;height:80px;border-radius:50%;perspective:800px;margin:auto;margin-bottom:20px;}

i.fa.fa-star{color:#000;margin-top:15px;margin-left:9px;}

.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%;}

.inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA;}

.inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA;}

.inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA;}

@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}}

@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg);}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg);}}

@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg);}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg);}}

Bước 3: Chèn Đoạn HTML Hiển Thị Ở Nơi Bạn Muốn.

<div class='loader'> <i aria-hidden='true' class='fa fa-star'></i> <div class='inner one'></div> <div class='inner two'></div> <div class='inner free'></div> </div>

Demo

- Người đăng-CTV: Trần Huy
- Mọi chi tiết xin liên hệ:
• Official-website: s2topvn.blogspot.com
• Email: Huyplayslot@gmail.com
• Facebook: www.Fb.com/Huy.Rockett