Hiệu ứng loading cho blogspot không còn xa lạ gì đối với các blogger Việt Nam và nước ngoài. Một số trang có hiệu ứng khá đẹp như google, facebook, youtube....
Nhưng nhược điểm của nó làm cho blog của mình load chậm đi một chút, các bạn nên cân nhắc khi chèn vào template của mình nhé.
Một số hiệu ứng loading đẹp cho blogger
Để chèn hiệu ứng loading cho blogger chúng ta cần 1 đoạn Javascript và một chút CSS cho nó.Công việc đầu tiên của bạn khi chèn một tiện ích gì đừng quên đăng nhập vào tài khoản blogger nhé.
Sau khi đăng nhập xong các bạn chọn Mẫu tiếp chọn Chỉnh sửa HTML sau đó tìm đến thẻ </head> và thêm đoạn Javascript bên dưới lên trước thẻ </head>
<script src='https://dl.dropboxusercontent.com/u/184079020/progressbar.js'/>Sau khi thêm Javascript xong chọn bạn chọn một số style CSS bên dưới và chèn trước thẻ ]]></skin> sau đó lưu lại và xem kết quả.
Một số style loading đẹp cho blogger
Style 1:.pace {Style 2:
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #29d;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
height: 2px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.pace {Style 3 :
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: #29d;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
pointer-events: none;
}
.pace.pace-active .pace-activity {
-webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
transform: translateX(50%) translateY(-50%) rotate(45deg);
}
.pace .pace-activity::before,
.pace .pace-activity::after {
position: absolute;
bottom: 30px;
left: 50%;
display: block;
border: 5px solid #fff;
border-radius: 50%;
content: '';
}
.pace .pace-activity::before {
margin-left: -40px;
width: 80px;
height: 80px;
border-right-color: rgba(0, 0, 0, .2);
border-left-color: rgba(0, 0, 0, .2);
-webkit-animation: pace-rotation 3s linear infinite;
animation: pace-rotation 3s linear infinite;
}
.pace .pace-activity::after {
bottom: 50px;
margin-left: -20px;
width: 40px;
height: 40px;
border-top-color: rgba(0, 0, 0, .2);
border-bottom-color: rgba(0, 0, 0, .2);
-webkit-animation: pace-rotation 1s linear infinite;
animation: pace-rotation 1s linear infinite;
}
@-webkit-keyframes pace-rotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
.pace {Style 4:
width: 140px;
height: 300px;
position: fixed;
top: -90px;
right: -20px;
z-index: 2000;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 2s linear 0s;
-moz-transition: all 2s linear 0s;
transition: all 2s linear 0s;
}
.pace.pace-active {
-webkit-transform: scale(.25);
-moz-transform: scale(.25);
-ms-transform: scale(.25);
-o-transform: scale(.25);
transform: scale(.25);
opacity: 1;
}
.pace .pace-activity {
width: 140px;
height: 140px;
border-radius: 70px;
background: #29d;
position: absolute;
top: 0;
z-index: 1911;
-webkit-animation: pace-bounce 1s infinite;
-moz-animation: pace-bounce 1s infinite;
-o-animation: pace-bounce 1s infinite;
-ms-animation: pace-bounce 1s infinite;
animation: pace-bounce 1s infinite;
}
.pace .pace-progress {
position: absolute;
display: block;
left: 50%;
bottom: 0;
z-index: 1910;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
-webkit-animation: pace-compress .5s infinite alternate;
-moz-animation: pace-compress .5s infinite alternate;
-o-animation: pace-compress .5s infinite alternate;
-ms-animation: pace-compress .5s infinite alternate;
animation: pace-compress .5s infinite alternate;
}
@-webkit-keyframes pace-bounce {
0% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 140px;
-webkit-animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
-webkit-animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
-webkit-animation-timing-function: ease-out;
}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes pace-bounce {
0% {
top: 0;
-moz-animation-timing-function: ease-in;
}
40% {}
50% {
top: 140px;
height: 140px;
-moz-animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
-moz-animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
-moz-animation-timing-function: ease-out;}
95% {
top: 0;
-moz-animation-timing-function: ease-in;
}
100% {top: 0;
-moz-animation-timing-function: ease-in;
}
}
@keyframes pace-bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
50% {
top: 140px;
height: 140px;
animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
animation-timing-function: ease-out;
}
95% {
top: 0;
animation-timing-function: ease-in;
}
100% {
top: 0;
animation-timing-function: ease-in;
}
}
@-webkit-keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-webkit-animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
-webkit-animation-timing-function: ease-out;
}
}
@-moz-keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
-moz-animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
-moz-animation-timing-function: ease-out;
}
}
@keyframes pace-compress {
0% {
bottom: 0;
margin-left: -30px;
width: 60px;
height: 75px;
background: rgba(20, 20, 20, .1);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
border-radius: 30px / 40px;
animation-timing-function: ease-in;
}
100% {
bottom: 30px;
margin-left: -10px;
width: 20px;
height: 5px;
background: rgba(20, 20, 20, .3);
box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
border-radius: 20px / 20px;
animation-timing-function: ease-out;
}
}
.pace {Style 5:
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-perspective: 12rem;
-moz-perspective: 12rem;
-ms-perspective: 12rem;
-o-perspective: 12rem;
perspective: 12rem;
z-index: 2000;
position: fixed;
height: 6rem;
width: 6rem;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace.pace-inactive .pace-progress {
display: none;
}
.pace .pace-progress {
position: fixed;
z-index: 2000;
display: block;
position: absolute;
left: 0;
top: 0;
height: 6rem;
width: 6rem !important;
line-height: 6rem;
font-size: 2rem;
border-radius: 50%;
background: rgba(34, 153, 221, 0.8);
color: #fff;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
text-align: center;
-webkit-animation: pace-3d-spinner linear infinite 2s;
-moz-animation: pace-3d-spinner linear infinite 2s;
-ms-animation: pace-3d-spinner linear infinite 2s;
-o-animation: pace-3d-spinner linear infinite 2s;
animation: pace-3d-spinner linear infinite 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.pace .pace-progress:after {
content: attr(data-progress-text);
display: block;
}
@-webkit-keyframes pace-3d-spinner {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
}
}
@-moz-keyframes pace-3d-spinner {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(360deg);
}
}
@-ms-keyframes pace-3d-spinner {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(360deg);
}
}
@-o-keyframes pace-3d-spinner {
from {
-o-transform: rotateY(0deg);
}
to {
-o-transform: rotateY(360deg);
}
}
@keyframes pace-3d-spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.pace.pace-inactive {Style 6 :
display: none;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
height: 60px;
width: 100px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace .pace-progress {
z-index: 2000;
position: absolute;
height: 60px;
width: 100px !important;
}
.pace .pace-progress:before {
content: attr(data-progress-text);
text-align: center;
color: #fff;
background: #29d;
border-radius: 50%;
font-family: "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 100;
line-height: 1;
padding: 20% 0 7px;
width: 50%;
height: 40%;
margin: 10px 0 0 30px;
display: block;
z-index: 999;
position: absolute;
}
.pace .pace-progress:after {
border-radius: 50%;
border: 5px solid #29d;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation: spin-3 2s linear infinite;
-moz-animation: spin-3 2s linear infinite;
-o-animation: spin-3 2s linear infinite;
animation: spin-3 2s linear infinite;
}
.pace .pace-activity {
font-size: 15px;
line-height: 1;
z-index: 2000;
position: absolute;
height: 60px;
width: 100px;
display: block;
}
.pace .pace-activity:before {
border-radius: 50%;
border: 5px solid #29d;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
-webkit-animation: spin-1 2s linear infinite;
-moz-animation: spin-1 2s linear infinite;
-o-animation: spin-1 2s linear infinite;
animation: spin-1 2s linear infinite;
}
.pace .pace-activity:after{
border-radius: 50%;
border: 5px solid #29d;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: spin-2 2s linear infinite;
-moz-animation: spin-2 2s linear infinite;
-o-animation: spin-2 2s linear infinite;
animation: spin-2 2s linear infinite;
}
@-webkit-keyframes spin-1 {
0% { -webkit-transform: rotate(0deg); }
100%{ -webkit-transform: rotate(359deg);}
}
@-moz-keyframes spin-1 {
0% { -moz-transform: rotate(0deg); }
100%{ -moz-transform: rotate(359deg);}
}
@-o-keyframes spin-1 {
0% { -o-transform: rotate(0deg); }
100%{ -o-transform: rotate(359deg);}
}
@keyframes spin-1 {
0% { transform: rotate(0deg); }
100%{ transform: rotate(359deg);}
}
@-webkit-keyframes spin-2 {
0% { -webkit-transform: rotate(59.8deg); }
100%{ -webkit-transform: rotate(418.8deg);}
}
@-moz-keyframes spin-2 {
0% { -moz-transform: rotate(59.8deg); }
100%{ -moz-transform: rotate(418.8deg);}
}
@-o-keyframes spin-2 {
0% { -o-transform: rotate(59.8deg); }
100%{ -o-transform: rotate(418.8deg);}
}
@keyframes spin-2 {
0% { transform: rotate(59.8deg); }
100%{ transform: rotate(418.8deg);}
}
@-webkit-keyframes spin-3 {
0% { -webkit-transform: rotate(119.6deg); }
100%{ -webkit-transform: rotate(478.6deg);}
}
@-moz-keyframes spin-3 {
0% { -moz-transform: rotate(119.6deg); }
100%{ -moz-transform: rotate(478.6deg);}
}
@-o-keyframes spin-3 {
0% { -o-transform: rotate(119.6deg); }
100%{ -o-transform: rotate(478.6deg);}
}
@keyframes spin-3 {
0% { transform: rotate(119.6deg); }
100%{ transform: rotate(478.6deg);}
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
z-index: 2000;
position: fixed;
height: 90px;
width: 90px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pace.pace-inactive .pace-activity {
display: none;
}
.pace .pace-activity {
position: fixed;
z-index: 2000;
display: block;
position: absolute;
left: -30px;
top: -30px;
height: 90px;
width: 90px;
display: block;
border-width: 30px;
border-style: double;
border-color: #29d transparent transparent;
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;
}
.pace .pace-activity:before {
content: ' ';
position: absolute;
top: 10px;
left: 10px;
height: 50px;
width: 50px;
display: block;
border-width: 10px;
border-style: solid;
border-color: #29d transparent transparent;
border-radius: 50%;
}
@-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); }
}
Video hướng dẫn và mẫu style
Hy vọng 6 style đẹp trên các bạn chọn ra một cái ưng ý nhất về hiệu ứng loading đẹp cho blogger/blogspot.
Tag :
CSS,
Javascript
0 nhận xét trong bài "Một số hiệu ứng loading đẹp cho blogger"
Cám ơn các bạn ghé thăm Blog Tuấn Phan !
Nhận xét để đóng góp ý kiến bài viết.
Vui lòng viết nhận xét có dấu.
Không dùng từ ngữ thô tục, chửi bậy.
Nhận xét chứa link spame sẻ bị xóa.
Tạm thời khóa comment ẩn danh do nhiều bạn lợi dụng spame.