Loading syle css3 – circle

Trở về

  • 4,066

Loading circle, có nhiều dạng khác nhau được xử lý gần giống như nhau, đó là sử dụng @framekey, animation trong CSS3, biến công việc tưởng như khó khăn trở nên vô cùng đơn giản.

Trình duyệt – hệ điều hành hỗ trợ

Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:

Trình duyệt

  • Internet Explorer10
  • Firefox4
  • Opera12
  • Google Chrome19
  • Safari5.1

Hệ điều hành Smartphone – Tablets

  • IOS3.2
  • Android2.1
  • Window phone8

Loading css3 – bounce

Với 2 background hình tròn, nếu chúng ta áp dụng animation và transform scale luân phiên nhau thì cũng có thể tạo ra được một hiệu ứng loading khá là đẹp.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.circle {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 50px auto;
}

.circle1,
.circle2 {
    border-radius: 50%;
    background-color: #ef5f38;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-animation: circle_bounce 2.0s infinite ease-in-out;
            animation: circle_bounce 2.0s infinite ease-in-out;
}

.circle2 {
    -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
}

@-webkit-keyframes circle_bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50%      { -webkit-transform: scale(1.0) }
}

@keyframes circle_bounce {
    0%, 100% { 
        -webkit-transform: scale(0.0);
                transform: scale(0.0);
    } 50% { 
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}
</style>
</head>
<body>
<div class="circle">
    <div class="circle1"></div>
    <div class="circle2"></div>
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Ghi chú: Những ví dụ trong bài viết này được tham khảo từ nhiều nguồn khác nhau.

Download file để thực hành

Loading scaleout

Chuyển động của một background hình tròn kết hợp transform scale và opacity sẽ cho ta hiệu ứng đơn giản nhưng đẹp.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.circle {
    background-color: #ef5f38;
    border-radius: 100%;
    height: 40px;
    margin: 50px auto;
    width: 40px;
    -webkit-animation: circle_scaleout 1.0s infinite ease-in-out;
            animation: circle_scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes circle_scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.0);
    }
}

@keyframes circle_scaleout {
    0% { 
        -webkit-transform: scale(0);
                transform: scale(0);
    } 100% {
        opacity: 0;
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

Hiển thị trình duyệt:

 

Loading bounce dot

Chỉ cần thay đổi giá trị cho animation là ta có thêm một hiệu ứng mới, đoạn code bên dưới là sự phối hợp của nhiều thuộc tính CSS3 khác nhau.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.circle {
    height: 40px;
    margin: 50px auto;
    position: relative;
    text-align: center;
    width: 40px;
    -webkit-animation: circle_dot 2.0s infinite linear;
            animation: circle_dot 2.0s infinite linear;
}

.circle1, .circle2 {
    height: 60%;
    display: inline-block;
    background-color: #ef5f38;
    border-radius: 100%;
    position: absolute;
    top: 0;
    width: 60%;
    -webkit-animation: circle_bounce 2.0s infinite ease-in-out;
            animation: circle_bounce 2.0s infinite ease-in-out;
}

.circle2 {
    bottom: 0;
    top: auto;
    -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
}

@-webkit-keyframes circle_dot { 100% { -webkit-transform: rotate(360deg) }}
@keyframes circle_dot { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes circle_bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50%      { -webkit-transform: scale(1.0) }
}

@keyframes circle_bounce {
    0%, 100% { 
        -webkit-transform: scale(0.0);
                transform: scale(0.0);
    } 50% { 
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}
</style>
</head>
<body>
<div class="circle">
    <div class="circle1"></div>
    <div class="circle2"></div>
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Loading bouncedelay

Cho xuất hiện lần lược các thành phần hình tròn luân phiên theo khoảng thời gian khác nhau, kết hợp với scale cũng sẽ là một dạng áp dụng tốt cho loading.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.circle {
    margin: 50px auto;
    width: 70px;
    text-align: center;
}

.circle > div {
    border-radius: 100%;
    background-color: #ef5f38;
    display: inline-block;
    height: 18px;
    width: 18px;
    -webkit-animation: circle_bouncedelay 1.4s infinite ease-in-out both;
            animation: circle_bouncedelay 1.4s infinite ease-in-out both;
}

.circle .circle1 {
    -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
}

.circle .circle2 {
    -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
}

@-webkit-keyframes circle_bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
              s40% { -webkit-transform: scale(1.0) }
}

@keyframes circle_bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
                transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}
</style>
</head>
<body>
<div class="circle">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    </div>
</body>
</html>

Hiển thị trình duyệt:

 

Loading circle

Đây là dạng hiệu ứng đánh lừa thị giác, các background hình tròn được sắp đặt sẵn sao cho nằm trên chu vi của một hình tròn, khi đó sử dụng khéo léo hiển thị của các hình tròn liên tục nhau sẽ tạo cảm giác giống như một số hình tròn có chuyển động.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.circle {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    position: relative;
}
.circle .circle_sub {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.circle .circle_sub:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #ef5f38;
    border-radius: 100%;
    -webkit-animation: circle_bounceDelay 1.2s infinite ease-in-out both;
            animation: circle_bounceDelay 1.2s infinite ease-in-out both;
}
.circle .circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg); }
.circle .circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg); }
.circle .circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
.circle .circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg); }
.circle .circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg); }
.circle .circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
.circle .circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg); }
.circle .circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg); }
.circle .circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg); }
.circle .circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); }
.circle .circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); }
.circle .circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
.circle .circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; }
.circle .circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
.circle .circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
.circle .circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; }
.circle .circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
.circle .circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; }
.circle .circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
.circle .circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s; }
.circle .circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
.circle .circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s; }

@-webkit-keyframes circle_bounceDelay {
        0%, 80%, 100% {
        -webkit-transform: scale(0);
                transform: scale(0);
    } 40% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes circle_bounceDelay {
        0%, 80%, 100% {
        -webkit-transform: scale(0);
                transform: scale(0);
    } 40% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
</style>
</head>
<body>
<div class="circle">
    <div class="circle1 circle_sub"></div>
    <div class="circle2 circle_sub"></div>
    <div class="circle3 circle_sub"></div>
    <div class="circle4 circle_sub"></div>
    <div class="circle5 circle_sub"></div>
    <div class="circle6 circle_sub"></div>
    <div class="circle7 circle_sub"></div>
    <div class="circle8 circle_sub"></div>
    <div class="circle9 circle_sub"></div>
    <div class="circle10 circle_sub"></div>
    <div class="circle11 circle_sub"></div>
    <div class="circle12 circle_sub"></div>
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Loading circle fade

Tương tự như trên, nhưng khác nhau là thay vì sử lý scale để ẩn hiện hình tròn, ở đây là dùng opacity để làm điều đó.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.circle {
    margin: 50px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.circle .circle_sub {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.circle .circle_sub:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #ef5f38;
    border-radius: 100%;
    -webkit-animation: circle_fadeDelay 1.2s infinite ease-in-out both;
            animation: circle_fadeDelay 1.2s infinite ease-in-out both;
}
.circle .circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
}
.circle .circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);
}
.circle .circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}
.circle .circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
}
.circle .circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
}
.circle .circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
.circle .circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg);
}
.circle .circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg);
}
.circle .circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
}
.circle .circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); 
}
.circle .circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); 
}
.circle .circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; 
}
.circle .circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; 
}
.circle .circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; 
}
.circle .circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; 
}
.circle .circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; 
}
.circle .circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; 
}
.circle .circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; 
}
.circle .circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
}
.circle .circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
}
.circle .circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
}
.circle .circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
}

@-webkit-keyframes circle_fadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

@keyframes circle_fadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; } 
}
</style>
</head>
<body>
<div class="circle">
    <div class="circle1 circle_sub"></div>
    <div class="circle2 circle_sub"></div>
    <div class="circle3 circle_sub"></div>
    <div class="circle4 circle_sub"></div>
    <div class="circle5 circle_sub"></div>
    <div class="circle6 circle_sub"></div>
    <div class="circle7 circle_sub"></div>
    <div class="circle8 circle_sub"></div>
    <div class="circle9 circle_sub"></div>
    <div class="circle10 circle_sub"></div>
    <div class="circle11 circle_sub"></div>
    <div class="circle12 circle_sub"></div>
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Có một bình luận cho “Loading syle css3 – circle”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.