jQuery UI 라이브러리 Progressba를 이용해 textarea안에 입력된 글자에 따라 progressbar를 채우며 몇 퍼센트까지 완료되었는지 표시하는 간단한 예제 소스 코드입니다.
See the Pen Untitled by zzarungna (@zzarungna) on CodePen.
간단히 소스 코드를 설명 하자면 jQuery의 Progressbar 디자인을 위해 필요한 스타일 파일 하나, jQuery 사용을 위해 jQuery 첨부 하나, jQuery UI를 사용하기 위해 필요한 첨부 파일 하나 총 3개의 파일을 첨부해야 정상적으로 jQuery UI를 사용하실 수 있습니다.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
jQuery UI 라이브러리의 progressbar에 이미 정의된 매개변수를 이용하니 어렵지 않게 구현할 수 있었습니다. change 매개 변수를 이용해 progressbar의 text 변경이 가능하며 complete 매개 변수를 통해 완료된 이후 처리를 쉽게 진행할 수 있었습니다.
progressbar.progressbar({ value: false, change: function() { progressLabel.text(progressbar.progressbar("value") + "%"); }, complete: function() { progressLabel.text("성공! 다음 단계로 진행 가능 합니다."); successButton.show(); } });
이번 예제 소스 코드에서 재밌는 점은 입력받은 글자 수에 따라 글자 길이를 실시간으로 확인해 progressbar의 매개변수 데이터를 변경해 줄 수 있는 부분이었던 것 같습니다.
var inputLength = $(this).val().length; var progressValue = (inputLength / maxLength) * 100; progressbar.progressbar("value", progressValue);미
일반적으로 progressbar는 파일을 다운로드 받거나 로딩이 필요한 페이지 또는 페이지에서 문서를 끝까지 보았는지 확인하는 용도로 많이 사용되지만, 재미 삼아 글자가 입력될 때마다 프로그레스바를 채우고 퍼센트를 표시하는 코드도 작성해 보았으니 필요하신 분들은 소스 코드를 복사해서 활용하시면 좋을 것 같습니다.