본문으로 바로가기

form submit 에 loading spinner 달기

category Studies/RubyonRails 2022. 2. 5. 19:13

| Code

Java script + html 

<script>
function showloading() {
  var loading_main = document.getElementById(`loading`);

  if (loading_main.style.display === "none") {
    loading_main.style.display="";
  } else {
    loading_main.style.display = "none";
  }
}
</script>

<form action="/search" method="GET"> 
<button type="submit" onclick="showloading()"></button>
</form>

<div id="loading-main" style="display:none;" class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

submit 의 onclick 옵션에 달아줄 java script 를 작성한 후, 적용 시켜준다.

저 show toggle function 은 EmotesRanking 의 차트를 보여주는 버튼에도 유용하게 사용하였다.