Star Đức Blog: CÁCH TẠO HIỆU ỨNG LOADING HIỆU ỨNG MÀU VỚI CSS3.

Lời đầu

Xin chào tất cả các bạn , mình là Đức đây, cũng 1 thời gian rất lâu rồi mình chưa đăng gì lên blog cả, nên hôm nay rảnh mình viết và đăng lên luôn, thời gian qua mình bận quá nên không đăng được, chắc các bác quên mình rồi =)). Bài viết hôm nay mình sẽ hương dẫn các bạn tạo hiệu ứng loading màu bằng CSS3 kết hợp với cả HTML5 nhé =)). Và mình chúc các bạn 1 kì nghỉ hè vui vẻ! 

HTML

Để tạo được hiệu ứng loading này các bạn copy cấu trúc HTML bên dưới nhé:

<div class="container"> <div class="row"> <div id="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </div>

CSS

Cái này chúng ta không cần sử dụng Javascript gì cả. Các bạn chỉ cần để ý các dòng CSS3 bên dưới này nhé:

#loader { bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; } #loader { bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; } #loader .dot { bottom: 0; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 87.5px; } #loader .dot::before { border-radius: 100%; content: ""; height: 87.5px; left: 0; position: absolute; right: 0; top: 0; transform: scale(0); width: 87.5px; } #loader .dot:nth-child(7n+1) { transform: rotate(45deg); } #loader .dot:nth-child(7n+1)::before { animation: 0.8s linear 0.1s normal none infinite running load; background: #00ff80 none repeat scroll 0 0; } #loader .dot:nth-child(7n+2) { transform: rotate(90deg); } #loader .dot:nth-child(7n+2)::before { animation: 0.8s linear 0.2s normal none infinite running load; background: #00ffea none repeat scroll 0 0; } #loader .dot:nth-child(7n+3) { transform: rotate(135deg); } #loader .dot:nth-child(7n+3)::before { animation: 0.8s linear 0.3s normal none infinite running load; background: #00aaff none repeat scroll 0 0; } #loader .dot:nth-child(7n+4) { transform: rotate(180deg); } #loader .dot:nth-child(7n+4)::before { animation: 0.8s linear 0.4s normal none infinite running load; background: #0040ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+5) { transform: rotate(225deg); } #loader .dot:nth-child(7n+5)::before { animation: 0.8s linear 0.5s normal none infinite running load; background: #2a00ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+6) { transform: rotate(270deg); } #loader .dot:nth-child(7n+6)::before { animation: 0.8s linear 0.6s normal none infinite running load; background: #9500ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+7) { transform: rotate(315deg); } #loader .dot:nth-child(7n+7)::before { animation: 0.8s linear 0.7s normal none infinite running load; background: magenta none repeat scroll 0 0; } #loader .dot:nth-child(7n+8) { transform: rotate(360deg); } #loader .dot:nth-child(7n+8)::before { animation: 0.8s linear 0.8s normal none infinite running load; background: #ff0095 none repeat scroll 0 0; }

Lời cuối

Mình mong là qua bài viết này các bạn sẽ học hỏi nhiều về CSS hơn, bài viết đã kết thúc rồi, mình chúc các bạn 1 ngày thật vui và may mắn <3 

Ảnh demo.