궁금하다고 쪽지주신 분이 계셔서.. 비교적 간단한거라 팁으로 올려드립니다.
CSS스피너와 jquery를 이용한 방법입니다.
(스케치북 게시판 기준)
1. HTML
_read.html 적당한 위치에 다음 태그를 넣어주세요
<button class="comment-reload" onclick="commentReload({$oDocument->document_srl})"> <span>댓글 새로고침</span> <div class="loading-spinner"></div> </button>
2. CSS
board.css 적당한 위치에 다음 코드를 넣어주세요.
.bd button.comment-reload {position:relative; width:100px; height:32px; background-color:#54639e; color:#fff; text-align:center; border:none} .bd .loading-spinner { z-index:2; position:absolute; display:none; border:3px solid #fff; border-right-color:transparent; border-radius:50%; box-sizing:border-box; -webkit-animation-duration:0.45s; -moz-animation-duration:0.45s; animation-duration:0.45s; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-name:rotate-forever; -moz-animation-name:rotate-forever; animation-name:rotate-forever; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; animation-timing-function:linear; height:20px; width:20px; top:6px; left:40px; background-color:#54639e; } @-webkit-keyframes rotate-forever { 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)} } @-moz-keyframes rotate-forever { 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)} } @keyframes rotate-forever { 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg)} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg)} }
3. JS
board.js 맨 위에 다음 코드를 넣어주세요.
function commentReload(target_srl) { var reqUrl = current_url.setQuery('mid', current_mid, 'document_srl', target_srl); jQuery('.loading-spinner').show(); jQuery('.comment-reload > span').hide(); jQuery.ajax ({ url:reqUrl, dataType:'html', success: function(data) { var a = jQuery(data), b = a.find('#cmtPosition').html(); jQuery('#cmtPosition').html(b); }, complete: function() { setTimeout(function() { jQuery('.loading-spinner').fadeOut(); jQuery('.comment-reload > span').fadeIn(); }, 500) } }); }
잘 안되시는 분은 댓글로 질문주시면 답변 드리겠습니다.