Loading syle css3 – circle 02
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.
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>