Demo
CSS
Các bạn khai báo CSS của biểu tượng muốn sử dụng.
.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 10px; } .lds-ellipsis span { position: absolute; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #d9dbdd; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis span:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis span:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis span:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis span:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }
Ngoài biểu tượng mình giới thiệu, các bạn có thể chọn thêm biểu tượng khác tại đây.
See the Pen
Pure CSS Loaders by Daria Koutevska (@DariaIvK)
on CodePen.
JS
Để sử dụng, các bạn làm như sau.
$('#id').click(function() { $(this).after(' <span class="lds-ellipsis"><span></span><span></span><span></span><span></span></span>'); });
Để hiển thị trạng thái Đang Xử Lý cho Ajax, các bạn làm như sau.
$('#id').click(function() { $(this).after(' <span class="lds-ellipsis"><span></span><span></span><span></span><span></span></span>'); $.ajax({ type: 'post', dataType: 'json', url: 'https://www.inithtml.com/wp-admin/admin-ajax.php', data: { 'action': 'hello', 'data': 'Hello World!' }, success: function(response) { if(response.success) { // Thành công } }, complete: function() { $('.lds-ellipsis').remove(); } }); });
Chúc các bạn thành công!