Tạo Hiệu Ứng Loading Với CSS Spinner Tuyệt Đẹp Cho Website/Blogspot

byThầy Hiếu Bụng Bự • • 2 min read
0

LỜI MỞ ĐẦU

Chào mừng các bạn đã đến với bài viết tiết theo của mình! Hôm nay, mình xin giới thiệu với các bạn 10 mẫu Css Loading tuyệt đẹp mà mình vọc được ở bên nước ngoài. Không liên thiên nữa thì chúng ta bắt đầu nào =))

Hướng dẫn: Vào Blog => Chủ đề => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <body> => Dán đoạn code dưới đây vào phía dưới thẻ <body> => Lưu lại chủ đề.

SPINNER #1


Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    margin: 1em auto;
    overflow: hidden;
    font-size: 15px;
    text-indent: -999em;
    border-radius: 50%;
    width: 10em;
    height: 10em;
    border: 1.1em solid rgba(0, 0, 0, 0.1);
    border-bottom: 1.1em solid #000;
    animation: spin1 1s infinite linear;
}
@keyframes spin1 {
    100% {
        transform: rotate(360deg);
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #2


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 10px;
    text-indent: -999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    margin: 10em auto;
    border-radius: 50%;
    animation: spin2 5s infinite ease-in;
}
@keyframes spin2 {
    0%,90%,100% {
        box-shadow: 6em 0em 0 1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 -1em #000000;
    }
    10%,80% {
        box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 -1em #000000;
    }
    20%,70% {
        box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 -1em #000000;
    }
    30%,60% {
        box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 1em #000000, -10em 0em 0 -1em #000000;
    }
    40%,50% {
        box-shadow: 6em 0em 0 -1em #000000, 2em 0em 0 -1em #000000, -2em 0em 0 -1em #000000, -6em 0em 0 -1em #000000, -10em 0em 0 1em #000000;
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #3


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    margin: 3em auto;
    position: relative;
    overflow: hidden;
    font-size: 15px;
    text-indent: -999em;
    border-radius: 50%;
    width: 10em;
    height: 10em;
    box-shadow: 0em 0.8em 0.3em #000;
    animation: spin3 0.9s infinite linear;
}
@keyframes spin3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #4


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 10px;
    text-indent: -999em;
    overflow: hidden;
    width: 4em;
    height: 4em;
    margin: 10em auto;
    border-radius: 50%;
    box-shadow: 0em -8em 0 -2em #000000, 6em -6em 0 -1em #000000, 8em 0em 0 0em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
    animation: spin4 2s infinite linear;
}
@keyframes spin4 {
    12.5% {
        box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -2em #000000, 8em 0em 0 -1em #000000, 6em 6em 0 0em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
    }
    25% {
        box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -2em #000000, 6em 6em 0 -1em #000000, 0em 8em 0 0em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
    }
    37.5% {
        box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -2em #000000, 0em 8em 0 -1em #000000, -6em 6em 0 0em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -3em #000000;
    }
    50% {
        box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -2em #000000, -6em 6em 0 -1em #000000, -8em 0em 0 0em #000000, -6em -6em 0 -3em #000000;
    }
    62.5% {
        box-shadow: 0em -8em 0 -3em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -2em #000000, -8em 0em 0 -1em #000000, -6em -6em 0 0em #000000;
    }
    75% {
        box-shadow: 0em -8em 0 0em #000000, 6em -6em 0 -3em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -2em #000000, -6em -6em 0 -1em #000000;
    }
    87.5% {
        box-shadow: 0em -8em 0 -1em #000000, 6em -6em 0 0em #000000, 8em 0em 0 -3em #000000, 6em 6em 0 -3em #000000, 0em 8em 0 -3em #000000, -6em 6em 0 -3em #000000, -8em 0em 0 -3em #000000, -6em -6em 0 -2em #000000;
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #5


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 10px;
    text-indent: -999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    margin: 10em auto;
    box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 1);
    animation: spin5 2s infinite ease-in;
}
@keyframes spin5 {
    10%,90% {
        box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
    }
    20%,80% {
        box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 1), -2em 0em 0 1em rgba(0, 0, 0, 1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
    }
    30%,70% {
        box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 1), -2em 0em 0 1em rgba(0, 0, 0, 1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
    }
    40%,60% {
        box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 0.1), 6em 0em 0 1em rgba(0, 0, 0, 1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 1), -10em 0em 0 1em rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 10em 0em 0 1em rgba(0, 0, 0, 1), 6em 0em 0 1em rgba(0, 0, 0, 0.1), 2em 0em 0 1em rgba(0, 0, 0, 0.1), -2em 0em 0 1em rgba(0, 0, 0, 0.1), -6em 0em 0 1em rgba(0, 0, 0, 0.1), -10em 0em 0 1em rgba(0, 0, 0, 1);
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #6


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 17px;
    text-indent: -999em;
    position: relative;
    border-radius: 48%;
    overflow: hidden;
    width: 0em;
    height: 0em;
    margin: 6em auto;
    box-shadow: none;
    animation: spin6 2s infinite linear;
}
@keyframes spin6 {
    15% {
        box-shadow: -1.5em -1.5em 0 0.2em green, -1.5em 1.5em 0 0.2em blue, 1.5em 1.5em 0 0.2em red, 1.5em -1.5em 0 0.2em yellow;
        transform: rotate(0.25turn);
    }
    80% {
        width: 10em;
        height: 10em;
        margin: 1em auto;
        transform: rotate(2turn);
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #7


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 10px;
    text-indent: -999em;
    overflow: hidden;
    width: 4em;
    height: 4em;
    margin: 10em auto;
    border-radius: 50%;
    box-shadow: 0em -8em 0 0em #000000, 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    animation: spin7 2s infinite linear;
}
@keyframes spin7 {
    12.5% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em #000000, 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    }
    25% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em #000000, 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    }
    37.5% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em #000000, 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em #000000, -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    }
    62.5% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em #000000, -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    }
    75% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em #000000, -6em -6em 0 0em rgba(0, 0, 0, 0.1);
    }
    87.5% {
        box-shadow: 0em -8em 0 0em rgba(0, 0, 0, 0.1), 6em -6em 0 0em rgba(0, 0, 0, 0.1), 8em 0em 0 0em rgba(0, 0, 0, 0.1), 6em 6em 0 0em rgba(0, 0, 0, 0.1), 0em 8em 0 0em rgba(0, 0, 0, 0.1), -6em 6em 0 0em rgba(0, 0, 0, 0.1), -8em 0em 0 0em rgba(0, 0, 0, 0.1), -6em -6em 0 0em #000000;
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #8


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 15px;
    text-indent: -999em;
    position: relative;
    border-radius: 48%;
    overflow: hidden;
    width: 10em;
    height: 10em;
    margin: 3em auto;
    box-shadow: -0.8em -0.8em 0.1em 0.2em #000, -0.8em 0.8em 0.1em 0.2em #000, 0.8em 0.8em 0.1em 0.2em #000, 0.8em -0.8em 0.1em 0.2em #000;
    animation: spin8 5s infinite linear;
}
@keyframes spin8 {
    0% {
        transform: rotate(0turn);
    }
    50% {
        box-shadow: -0.4em -0.4em 0.1em 0.2em #000, -0.4em 0.4em 0.1em 0.2em #000, 0.4em 0.4em 0.1em 0.2em #000, 0.4em -0.4em 0.1em 0.2em #000;
    }
    100% {
        transform: rotate(3turn);
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #9


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    font-size: 5px;
    text-indent: -999em;
    overflow: hidden;
    width: 2em;
    height: 2em;
    margin: 19em auto;
    border-radius: 50%;
    box-shadow: -12.5em 0em 0em 2em rgba(0, 0, 0, 0.1), -7em 0em 0em 1em rgba(0, 0, 0, 0.1), -3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 7em 0em 0em 1em rgba(0, 0, 0, 0.1), 12.5em 0em 0em 2em rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.0);
    animation: spin9 1s infinite ease;
}
@keyframes spin9 {
    0% {
        background-color: black;
    }
    25% {
        box-shadow: -12.5em 0em 0em 2em rgba(0, 0, 0, 0.1), -7em 0em 0em 1em rgba(0, 0, 0, 0.1), -3em 0em 0em 0.5em black, 3em 0em 0em 0.5em black, 7em 0em 0em 1em rgba(0, 0, 0, 0.1), 12.5em 0em 0em 2em rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: -12.5em 0em 0em 2em rgba(0, 0, 0, 0.1), -7em 0em 0em 1em black, -3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 7em 0em 0em 1em black, 12.5em 0em 0em 2em rgba(0, 0, 0, 0.1);
    }
    75% {
        box-shadow: -12.5em 0em 0em 2em black, -7em 0em 0em 1em rgba(0, 0, 0, 0.1), -3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 3em 0em 0em 0.5em rgba(0, 0, 0, 0.1), 7em 0em 0em 1em rgba(0, 0, 0, 0.1), 12.5em 0em 0em 2em black;
    }
    100% {
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>

SPINNER #10


Loading...
Copy toàn bộ Code phía dưới nhé !
<style type='text/css'>
.spinner {
    margin: 4em auto;
    overflow: hidden;
    font-size: 10px;
    text-indent: -999em;
    border-radius: 50%;
    width: 10em;
    height: 10em;
    border: 1.1em solid rgba(0, 0, 0, 0.2);
    border-bottom: 1.1em solid #000;
    border-top: 1.1em solid #000;
    box-shadow: 0em 0em 0em 2em rgba(0, 0, 0, 0.2), -5em 0em 0em -4em black, 5em 0em 0em -4em black, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4);
    animation: spin10 2s infinite linear;
}
@keyframes spin10 {
    33%,66% {
        box-shadow: 0em 0em 0em 2em rgba(0, 0, 0, 0.2), -5em 0em 0em -4em red, 5em 0em 0em -4em red, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4);
    }
    23%,43%,56%,76% {
        box-shadow: 0em 0em 0em 2em rgba(0, 0, 0, 0.2), -5em 0em 0em -4em black, 5em 0em 0em -4em black, 5em 0em 0em -3em rgba(0, 0, 0, 0.4), -5em 0em 0em -3em rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
<div class="spinner">
  Loading...
</div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.spinner ').fadeOut(1000);
})
//]]></script>
Các bạn có thể sử dụng thẻ điều kiện để nó chỉ hiển thị tại một trang nhất định. Nếu các bạn muốn như mình chỉ hiển thị tại trang chủ thì các bạn dùng thẻ điều kiện sau:
<b:if cond='data:view.isHomepage'>
<!--Đoạn code ở trên-->
</b:if>

LỜI KẾT

Trên đây combo 10 hiệu ứng loading page tuyệt đẹp cho website/blogspot. Phần Javascript do mình tự viết để load nên có vẻ không tương thích với Css đã nhảy bên nước ngoài cho lắm (trình độ còn kém, thông cảm cho mình nha). Rất mong nhận được ý kiến đóng góp từ các bạn. Xin chào và hẹn gặp lại !


Copyright © Lê Anh Đức
4.94 / 169 rates

Post a Comment

Previous Post Next Post