loading button 쉽게 만들기(with js)

사용자의 Re-Click을 방지하기 위해서 "클릭 했으니깐 기다려주세요!" 라는 메세지를 전달하기 위해서는 loading button이 짱이다.

 

간단하게 loading button을 만드는 css를 적어보자 한다.

 

참조 사이트 : https://loading.io/button/

Loading Buttons / Pure CSS Button that Loads

 

1. loading.css와 loading-btn.css를 다운한다.

2. 버튼을 만든다(클릭 시 버튼 옆에 loading 이미지 생성)

<button id="search">검색
	<span class="ld ld-ring ld-spin-fast"></span>
</button>

3. 버튼 옆에 loading 버튼이 돌아가는것을 확인 후 jquery로 토글한다

class Main {
    constructor() {
        this.setSubmitEvent();
        this.loadingButton = '<span class="ld ld-ring ld-spin-fast"></span>'; // loading 버튼
        this.button = $('#search');
    }

    setButtonDisable = () => {
    	this.button.append(this.loadingButton); // loading 버튼 확성화
    	this.button.attr('disabled', true); // 재 클릭 방지를 위한 button disable
	};

    setButtonEnable= () => {
		$('#search span').remove();
    	this.button.attr('disabled', false);
	};

    setSubmitEvent(){
		$("#search-form").submit((e) => {
			e.preventDefault();

			let form = $("#search-form");

			$.ajax({
				url: '/',
				data: form.serialize(),
				type: 'post',
				dataType: 'json',
				beforeSend: ()=> {
					this.setButtonDisable();
				},
			}).done((data)=>{
				this.setButtonEnable();
				$("#result-table tbody").html(data.html_ranking_list);
			}).fail(function (xhr, textStatus) {
				alert('실패');
			});

			return false;

		});
    }

}

 

결론 : loading 버튼은 필요하지만 매번 만들기 귀찮다 복붙을 잘하자.