Loading syle css3 – circle 02

Trở về

  • 4,010

Thêm một vài loading circle, cách viết tương tự như trước, tuy nhiên hơi chi tiết một chút, sẽ có nhiều hiệu ứng đẹp cho bạn lựa chọn.

Loading css3 – ring

Thêm một vài loading circle, cách viết tương tự như trước, tuy nhiên hơi chi tiết một chú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;
}
@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-ms-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.ring {
    background: none;
    position: relative;
    height: 100px;
    margin: 50px auto;
    width: 100px;
    transform:scale(0.82);
}
.ring > div {
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0s;
    border-radius: 80px;
    box-shadow: 0 6px 0 0 #ef5f38;
    -ms-animation: uil-ring-anim 1s linear infinite;
    -moz-animation: uil-ring-anim 1s linear infinite;
    -webkit-animation: uil-ring-anim 1s linear infinite;
    -o-animation: uil-ring-anim 1s linear infinite;
    animation: uil-ring-anim 1s linear infinite;
}
</style>
</head>
<body>
<div class="ring">
    <div></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 css3 – ripple

Sử dụng một số thuộc tính css3 animation để tạo loading đơn giản.

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;
}
@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-moz-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-ms-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-moz-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-o-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
.uil-ripple-css {
    background: none;
    position: relative;
    margin: 50px auto;
    width: 100px;
    height: 100px;
    transform:scale(0.82)
}
.uil-ripple-css div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;s
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    border-width: 8px;
    border-style: solid;
    -ms-animation: uil-ripple 2s ease-out infinite;
    -moz-animation: uil-ripple 2s ease-out infinite;
    -webkit-animation: uil-ripple 2s ease-out infinite;
    -o-animation: uil-ripple 2s ease-out infinite;
    animation: uil-ripple 2s ease-out infinite;
}
.uil-ripple-css div:nth-of-type(1) {
    border-color: #afafb7;
}
.uil-ripple-css div:nth-of-type(2) {
    border-color: #ef5f38;
    -ms-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
</style>
</head>
<body>
<div class="uil-ripple-css">
    <div></div>
    <div></div>
</div>
</body>
</html>

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

 

Loading css3 – flickr

Sử dụng một số thuộc tính css3 animation để tạo loading đơn giản.

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;
}
@-webkit-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@-webkit-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@-moz-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@-ms-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@-moz-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@-webkit-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@-o-keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
@keyframes uil-flickr-anim1 {
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}
width: 100%;
@-webkit-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@-webkit-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@-moz-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@-ms-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@-moz-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@-webkit-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@-o-keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
@keyframes uil-flickr-anim2 {
    0% {
        left: 100px;
        z-index: 1;
    }
    49% {
        z-index: 1;
    }
    50% {
        left: 0;
        z-index: 10;
    }
    100% {
        left: 100px;
        z-index: 10;
    }
}
.uil-flickr-css {
    background: none;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    transform:scale(0.34);
}
.uil-flickr-css > div {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    position: absolute;
    top: 50px;
}
.uil-flickr-css > div:nth-of-type(1) {
    left: 0;
    background: #0462dc;
    z-index: 5;
    -ms-animation: uil-flickr-anim1 1s linear infinite;
    -moz-animation: uil-flickr-anim1 1s linear infinite;
    -webkit-animation: uil-flickr-anim1 1s linear infinite;
    -o-animation: uil-flickr-anim1 1s linear infinite;
    animation: uil-flickr-anim1 1s linear infinite;
}
.uil-flickr-css > div:nth-of-type(2) {
    left: 50px;
    background: #fc0284;
    -ms-animation: uil-flickr-anim2 1s linear infinite;
    -moz-animation: uil-flickr-anim2 1s linear infinite;
    -webkit-animation: uil-flickr-anim2 1s linear infinite;
    -o-animation: uil-flickr-anim2 1s linear infinite;
    animation: uil-flickr-anim2 1s linear infinite;
}
</style>
</head>
<body>
<div class="uil-flickr-css">
    <div></div>
    <div></div>
</div>
</body>
</html>

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

 

Loading css3 – rolling

Sử dụng một số thuộc tính css3 animation để tạo loading đơn giản.

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;
}
@-webkit-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@-webkit-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@-moz-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@-ms-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@-moz-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@-webkit-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@-o-keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
@keyframes uil-circle-css {
    0% {
        -ms-transform: translate(0, 0) scale(2);
        -moz-transform: translate(0, 0) scale(2);
        -webkit-transform: translate(0, 0) scale(2);
        -o-transform: translate(0, 0) scale(2);
        transform: translate(0, 0) scale(2);
        z-index: 1;
    }
    100% {
        -ms-transform: translate(0, 0) scale(0.1);
        -moz-transform: translate(0, 0) scale(0.1);
        -webkit-transform: translate(0, 0) scale(0.1);
        -o-transform: translate(0, 0) scale(0.1);
        transform: translate(0, 0) scale(0.1);
        z-index: 100;
    }
}
.uil-circle-css {
    background: none;
    overflow: hidden;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    -webkit-transform:scale(0.79)
}
.uil-circle-css> div {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    position: absolute;
    left: 0;
    top: 0;
    -ms-animation: uil-circle-css 2s linear infinite;
    -moz-animation: uil-circle-css 2s linear infinite;
    -webkit-animation: uil-circle-css 2s linear infinite;
    -o-animation: uil-circle-css 2s linear infinite;
    animation: uil-circle-css 2s linear infinite;
}
.uil-circle-css> div:nth-of-type(2n) {
    background: #fff6e6;
}
.uil-circle-css> div:nth-of-type(2n+1) {
    background: #f00;
}
.uil-circle-css > div:nth-of-type(1) {
    -ms-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}
.uil-circle-css > div:nth-of-type(2) {
    -ms-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
    -o-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
.uil-circle-css > div:nth-of-type(3) {
    -ms-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.uil-circle-css > div:nth-of-type(4) {
    -ms-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.uil-circle-css > div:nth-of-type(5) {
    -ms-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
.uil-circle-css > div:nth-of-type(6) {
    -ms-animation-delay: 1.25s;
    -moz-animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
    -o-animation-delay: 1.25s;
    animation-delay: 1.25s;
}
.uil-circle-css > div:nth-of-type(7) {
    -ms-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.uil-circle-css > div:nth-of-type(8) {
    -ms-animation-delay: 1.75s;
    -moz-animation-delay: 1.75s;
    -webkit-animation-delay: 1.75s;
    -o-animation-delay: 1.75s;
    animation-delay: 1.75s;
}
</style>
</head>
<body>
<div class="uil-circle-css">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></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.