- vừa được xem lúc

10 kiểu loading animations chỉ bằng CSS

0 0 29

Người đăng: Bui Thi Huyen

Theo Viblo Asia

Giới thiệu với các bạn 10 kiểu loading cực đẹp chỉ bằng css animation

HTML

Dựng khung HTML:

<body> <div class="content"> <h3>CSS3 Loading animations</h3> <div class="load-wrapp"> <div class="load-1"> <p>Loading 1</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-2"> <p>Loading 2</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-3"> <p>Loading 3</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <!-- Loading 4 don't work on firefox because of the border-radius and the "dashed" style. --> <div class="load-4"> <p>Loading 4</p> <div class="ring-1"></div> </div> </div> <div class="load-wrapp"> <div class="load-5"> <p>Loading 5</p> <div class="ring-2"> <div class="ball-holder"> <div class="ball"></div> </div> </div> </div> </div> <div class="load-wrapp"> <div class="load-6"> <p>Loading 6</p> <div class="letter-holder"> <div class="l-1 letter">L</div> <div class="l-2 letter">o</div> <div class="l-3 letter">a</div> <div class="l-4 letter">d</div> <div class="l-5 letter">i</div> <div class="l-6 letter">n</div> <div class="l-7 letter">g</div> <div class="l-8 letter">.</div> <div class="l-9 letter">.</div> <div class="l-10 letter">.</div> </div> </div> </div> <div class="load-wrapp"> <div class="load-7"> <p>Loading 7</p> <div class="square-holder"> <div class="square"></div> </div> </div> </div> <div class="load-wrapp"> <div class="load-8"> <p>Loading 8</p> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-9"> <p>Loading 9</p> <div class="spinner"> <div class="bubble-1"></div> <div class="bubble-2"></div> </div> </div> </div> <div class="load-wrapp"> <div class="load-10"> <p>Loading 10</p> <div class="bar"></div> </div> </div> </div> <div class="clear"></div>
</body>

CSS

Css cho hiệu ứng loading:

/* ----------------------------------------- = Css mặc định để làm cho bản demo đẹp hơn
-------------------------------------------- */ body { margin: 0 auto; padding: 20px; max-width: 1200px; overflow-y: scroll; font-family: "Open Sans", sans-serif; font-weight: 400; color: #777; background-color: #f7f7f7; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} .content { padding: 15px; overflow: hidden; background-color: #e7e7e7; background-color: rgba(0, 0, 0, 0.06);
} h1 { padding-bottom: 15px; border-bottom: 1px solid #d8d8d8; font-weight: 600;
} h1 span { font-family: monospace, serif;
} h3 { padding-bottom: 20px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);
} p { margin: 0; padding: 10px 0; color: #777;
} .clear { clear: both;
} /* ----------------------------------------- = CSS3 Loading animations
-------------------------------------------- */ /* =Elements style
---------------------- */
.load-wrapp { float: left; width: 100px; height: 100px; margin: 0 10px 10px 0; padding: 20px 20px 20px; border-radius: 5px; text-align: center; background-color: #d8d8d8;
} .load-wrapp p { padding: 0 0 20px;
}
.load-wrapp:last-child { margin-right: 0;
} .line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #4b9cdb;
} .ring-1 { width: 10px; height: 10px; margin: 0 auto; padding: 10px; border: 7px dashed #4b9cdb; border-radius: 100%;
} .ring-2 { position: relative; width: 45px; height: 45px; margin: 0 auto; border: 4px solid #4b9cdb; border-radius: 100%;
} .ball-holder { position: absolute; width: 12px; height: 45px; left: 17px; top: 0px;
} .ball { position: absolute; top: -11px; left: 0; width: 16px; height: 16px; border-radius: 100%; background: #4282b3;
} .letter-holder { padding: 16px;
} .letter { float: left; font-size: 14px; color: #777;
} .square { width: 12px; height: 12px; border-radius: 4px; background-color: #4b9cdb;
} .spinner { position: relative; width: 45px; height: 45px; margin: 0 auto;
} .bubble-1,
.bubble-2 { position: absolute; top: 0; width: 25px; height: 25px; border-radius: 100%; background-color: #4b9cdb;
} .bubble-2 { top: auto; bottom: 0;
} .bar { float: left; width: 15px; height: 6px; border-radius: 2px; background-color: #4b9cdb;
} /* =Animate the stuff
------------------------ */
.load-1 .line:nth-last-child(1) { animation: loadingA 1.5s 1s infinite;
}
.load-1 .line:nth-last-child(2) { animation: loadingA 1.5s 0.5s infinite;
}
.load-1 .line:nth-last-child(3) { animation: loadingA 1.5s 0s infinite;
} .load-2 .line:nth-last-child(1) { animation: loadingB 1.5s 1s infinite;
}
.load-2 .line:nth-last-child(2) { animation: loadingB 1.5s 0.5s infinite;
}
.load-2 .line:nth-last-child(3) { animation: loadingB 1.5s 0s infinite;
} .load-3 .line:nth-last-child(1) { animation: loadingC 0.6s 0.1s linear infinite;
}
.load-3 .line:nth-last-child(2) { animation: loadingC 0.6s 0.2s linear infinite;
}
.load-3 .line:nth-last-child(3) { animation: loadingC 0.6s 0.3s linear infinite;
} .load-4 .ring-1 { animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
} .load-5 .ball-holder { animation: loadingE 1.3s linear infinite;
} .load-6 .letter { animation-name: loadingF; animation-duration: 1.6s; animation-iteration-count: infinite; animation-direction: linear;
} .l-1 { animation-delay: 0.48s;
}
.l-2 { animation-delay: 0.6s;
}
.l-3 { animation-delay: 0.72s;
}
.l-4 { animation-delay: 0.84s;
}
.l-5 { animation-delay: 0.96s;
}
.l-6 { animation-delay: 1.08s;
}
.l-7 { animation-delay: 1.2s;
}
.l-8 { animation-delay: 1.32s;
}
.l-9 { animation-delay: 1.44s;
}
.l-10 { animation-delay: 1.56s;
} .load-7 .square { animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
} .load-8 .line { animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
} .load-9 .spinner { animation: loadingI 2s linear infinite;
}
.load-9 .bubble-1,
.load-9 .bubble-2 { animation: bounce 2s ease-in-out infinite;
}
.load-9 .bubble-2 { animation-delay: -1s;
} .load-10 .bar { animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
} @keyframes loadingA { 0 { height: 15px; } 50% { height: 35px; } 100% { height: 15px; }
} @keyframes loadingB { 0 { width: 15px; } 50% { width: 35px; } 100% { width: 15px; }
} @keyframes loadingC { 0 { transform: translate(0, 0); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, 0); }
} @keyframes loadingD { 0 { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }
} @keyframes loadingE { 0 { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
} @keyframes loadingF { 0% { opacity: 0; } 100% { opacity: 1; }
} @keyframes loadingG { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(70px, 0) rotate(360deg); } 100% { transform: translate(0, 0) rotate(0deg); }
} @keyframes loadingH { 0% { width: 15px; } 50% { width: 35px; padding: 4px; } 100% { width: 15px; }
} @keyframes loadingI { 100% { transform: rotate(360deg); }
} @keyframes bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); }
} @keyframes loadingJ { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, 0); background-color: #f5634a; width: 25px; }
} 

Tham khảo demo tại đây nhen ❤️

Bình luận

Bài viết tương tự

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 33

- vừa được xem lúc

Convert từ SVG sang Icon Font như thế nào?

Chào các bạn. Như câu hỏi trên title của bài viết, hôm nay mình sẽ hướng dẫn các bạn cách convert 1 file svg 1 cách khá đơn giản và vô cùng tiện lợi cho các bạn. https://icomoon.io/app/#/select.

0 0 39

- vừa được xem lúc

Xử lý văn bản quá dài hoặc quá ngắn bằng CSS

Trong quá trình code giao diện, có một trường hợp mà chúng ta thường hay gặp là đoạn văn bản quá dài, hoặc quá ngắn. Đôi khi, nếu chúng ta xử lý không tốt, chỉ thêm 1 chữ thôi, cũng đã đủ để vỡ layout

0 0 3.8k

- vừa được xem lúc

7 đơn vị CSS có thể bạn không biết

Giới thiệu. Thật dễ dàng để bị kẹt khi làm việc với các kỹ thuật CSS chúng ta biết rõ, nhưng làm như vậy sẽ gây bất lợi cho chúng ta khi những vấn đề mới xuất hiện.

0 0 41

- vừa được xem lúc

Những tính năng của CSS mới nhất năm 2021

Một trang web sẽ không thể thực hiện được nếu không có CSS. Ngôn ngữ chịu trách nhiệm về mặt tiền của trang web, có bố cục đẹp mắt và mọi yếu tố đều ở đúng vị trí của nó.

1 1 26

- vừa được xem lúc

Sự khác nhau giữa display: inline, block và inline-block

Ở bài viết này mình sẽ phân biệt ba kiểu hiển thị:. . display: inline. display: block.

0 0 36