xetown에 올라온 팁을 적용하기 쉽게 조금 수정했습니다.

앞에 아이콘은 fontawesome를 사용하셔야 하기 때문에 팁에는 일부 제거했습니다.

사용하시는 게시판 스킨 view 파일을 열고  <!--#include("./comment.html")--> 부분을 찾아서 그 아래 해당 코드를 삽입합니다.

<!-- 댓글 새로고침 -->
<div id="reply_refresh">
{@
$args->status = 1;
$args->document_srl = $oDocument->get('document_srl');
$args->module_srl = $oDocument->get('module_srl');
$args->list_count = 1;
$output = executeQueryArray('comment.getNewestCommentList',$args);
}

<span class="last_srl" style="display:none;">
{@ 
$lastData = end($output->data);
$last_srl = $lastData->comment_srl;
}
{$last_srl}
</span>
<div class="no_newcomment" style="display:none;">새로운 댓글이 없습니다.</div>
<div class="yes_newcomment" style="display:none;">새로운 댓글이 <a href="javascript:location.reload();" class="num">1개</a> 이상 추가되었습니다.</div>
<button class="comment-reload" onclick="commentReload({$oDocument->document_srl})"><span>댓글 새로고침</span>
<div class="loading-spinner"></div>
</button>
</div>

게시판 CSS 파일을 여시고, 아래 코드를 넣어주세요.

/* 댓글 새로고침 */
#reply_refresh{position:relative;height:25px;padding:15px 10px 40px 10px;border-top:1px solid #eee;text-align:center;overflow:hidden}
#reply_refresh .no_newcomment, #reply_refresh .yes_newcomment{position:absolute;bottom:5px;left:50%;height:10px;padding:10px 10px 15px;color:#666;text-align:center;overflow:hidden}
#reply_refresh .no_newcomment{margin-left:-76px}
#reply_refresh .yes_newcomment{margin-left:-120px}
#reply_refresh .yes_newcomment .num{color:#FF3636}
#reply_refresh button.comment-reload {position:relative; width:100px;height:25px;margin:0 auto;background-color:#1E7AE2;border:1px solid #42589a;border-radius:3px;color:#fff; text-align:center; border:none;line-height:25px;overflow:hidden}
#reply_refresh .loading-spinner {
z-index:2; position:absolute; display:none; border:2px 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:16px; width:16px; top:4px; left:50%;margin-left:-8px;background-color:#1E7AE2;overflow:hidden
}
@-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)}
}