Loading style css3 – square

Trở về

  • 4,391

Tạo loading bằng cách sử dụng keyframe và animation trong css3, áp dụng transform để có nhiều hiệu ứng hơ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 – spinner

Với một thành phần cơ bản, ta cho lật liên tục từ trục x, tiếp là trục y, cứ như vậy ta sẽ được một loading khá hay, kỹ thuật cho loading này là sử dụng animation cho tranform 3D.

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;
}
.square {
    background-color: #ef5f38;
    height: 40px;
    margin: 50px auto;
    width: 40px;
    -webkit-animation: square 1.2s infinite ease-in-out;
            animation: square 1.2s infinite ease-in-out;
}

@-webkit-keyframes square {
    0%   { -webkit-transform: perspective(120px) }
    50%  { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes square {
    0% { 
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                transform: perspective(120px) rotateX(0deg) rostateY(0deg);
    } 50% { 
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    } 100% { 
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>

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

 

Download file để thực hành

Loading css3 – cube

Kỹ thuật xử lý animation cho transform để điều khiển 2 thành phần đối lập nhau sẽ cho ta một dạng loading đẹp mắt.

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;
}
.square {
    height: 40px;
    margin: 50px auto;
    position: relative;
    width: 40px;
}

.square1, .square2 {
    background-color: #ef5f38;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    -webkit-animation: square 1.8s infinite ease-in-out;
            animation: square 1.8s infinite ease-in-out;
}

.square2 {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
}

@-webkit-keyframes square {
    25%  { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
    50%  { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
    75%  { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
}

@keyframes square {
    25% { 
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
                transform: translateX(42px) rotate(-90deg) scale(0.5);
    } 50% { 
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
                transform: translateX(42px) translateY(42px) rotate(-179deg);
    } 50.1% { 
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
                transform: translateX(42px) translateY(42px) rotate(-180deg);
    } 75% { 
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
                transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    } 100% { 
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}
</style>
</head>
<body>
<div class="square">
    <div class="square1"></div>
    <div class="square2"></div>
</div>
</body>
</html>

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

 

Loading css3 – folding cube

Đây là một dạng kỹ thuật cũng áp dụng animation cho transform, tuy nhiên ta cho xử lý lần lược trên các element 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;
}
.square {
    height: 40px;
    margin: 20px auto;
    position: relative;
    width: 40px;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
}

.square .square_sub {
    float: left;
    height: 50%;
    position: relative;
    width: 50%;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1); 
}
.square .square_sub:before {
    background-color: #ef5f38;
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    -webkit-animation: square_folding 2.4s infinite linear both;
            animation: square_folding 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
.square .square_sub2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
            transform: scale(1.1) rotateZ(90deg);
}
.square .square_sub3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
            transform: scale(1.1) rotateZ(180deg);
}
.square .square_sub4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
            transform: scale(1.1) rotateZ(270deg);
}
.square .square_sub2:before {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}
.square .square_sub3:before {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s; 
}
.square .square_sub4:before {
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
}
@-webkit-keyframes square_folding {
    0%, 10% {
        opacity: 0;
        -webkit-transform: perspective(140px) rotateX(-180deg);
                transform: perspective(140px) rotateX(-180deg);
    } 25%, 75% {
        opacity: 1; 
        -webkit-transform: perspective(140px) rotateX(0deg);
                transform: perspective(140px) rotateX(0deg);
    } 90%, 100% {
        opacity: 0;
        -webkit-transform: perspective(140px) rotateY(180deg);
                transform: perspective(140px) rotateY(180deg);
    }
}

@keyframes square_folding {
    0%, 10% {
        opacity: 0; 
        -webkit-transform: perspective(140px) rotateX(-180deg);
                transform: perspective(140px) rotateX(-180deg);
    } 25%, 75% {
        opacity: 1; 
        -webkit-transform: perspective(140px) rotateX(0deg);
                transform: perspective(140px) rotateX(0deg);
    } 90%, 100% {
        opacity: 0;
        -webkit-transform: perspective(140px) rotateY(180deg);
                transform: perspective(140px) rotateY(180deg);
    }
}
</style>
</head>
<body>
<div class="square">
    <div class="square_sub1 square_sub"></div>
    <div class="square_sub2 square_sub"></div>
    <div class="square_sub4 square_sub"></div>
    <div class="square_sub3 square_sub"></div>
</div>
</body>
</html>

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

 

Loading css3 – cube grid

Một loạt xử lý liên tục cho 9 thành phần, nếu chúng ta xử lý tốt animation và transform cộng với một chút ý tưởng thì chúng ta không khó tạo ra nhiều hiệu ứng đẹp mắt.

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;
}
.square {
    height: 40px;
    margin: 50px auto;
    width: 40px;
}

.square .square_sub {
    background-color: #ef5f38;
    float: left;
    height: 33%;
    width: 33%;
    -webkit-animation: square_grid 1.3s infinite ease-in-out;
            animation: square_grid 1.3s infinite ease-in-out; 
}
.square .square_sub1 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}
.square .square_sub2 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}
.square .square_sub3 {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}
.square .square_sub4 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}
.square .square_sub5 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}
.square .square_sub6 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}
.square .square_sub7 {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}
.square .square_sub8 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}
.square .square_sub9 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

@-webkit-keyframes square_grid {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
                transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
                transform: scale3D(0, 0, 1);
    }
}

@keyframes square_grid {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
                transform: scale3D(1, 1, 1);
    } 35% {
        -webkit-transform: scale3D(0, 0, 1);
                transform: scale3D(0, 0, 1);
    } 
}
</style>
</head>
<body>
<div class="square">
        <div class="square_sub1 square_sub"></div>
        <div class="square_sub2 square_sub"></div>
        <div class="square_sub3 square_sub"></div>
        <div class="square_sub4 square_sub"></div>
        <div class="square_sub5 square_sub"></div>
        <div class="square_sub6 square_sub"></div>
        <div class="square_sub7 square_sub"></div>
        <div class="square_sub8 square_sub"></div>
        <div class="square_sub9 square_sub"></div>
    </div>
</body>
</html>

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

 

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.