diff --git a/static/quiz_item.coffee b/static/quiz_item.coffee index cce90a6..4fe30e2 100644 --- a/static/quiz_item.coffee +++ b/static/quiz_item.coffee @@ -67,10 +67,15 @@ $("#get-help").click (e) -> $("#api-refresh").click (e) -> e.preventDefault(); + $("#api-refresh").find('span').addClass('glyphicon-spin'); $.post("/refresh").success(() -> - refreshQuestion() - $('#success-area').show() - ).fail(() -> $('#error-area').show()); + refreshQuestion(); + $("#api-refresh").find('span').removeClass('glyphicon-spin'); + $('#success-area').show(); + ).fail(() -> + $('#error-area').show(); + $("#api-refresh").find('span').removeClass('glyphicon-spin'); + ); $('#error-area').find('button').click () -> $('#error-area').hide() diff --git a/static/quiz_item.js b/static/quiz_item.js index ae65179..4bcd35a 100644 --- a/static/quiz_item.js +++ b/static/quiz_item.js @@ -90,11 +90,14 @@ $("#api-refresh").click(function(e) { e.preventDefault(); + $("#api-refresh").find('span').addClass('glyphicon-spin'); return $.post("/refresh").success(function() { refreshQuestion(); + $("#api-refresh").find('span').removeClass('glyphicon-spin'); return $('#success-area').show(); }).fail(function() { - return $('#error-area').show(); + $('#error-area').show(); + return $("#api-refresh").find('span').removeClass('glyphicon-spin'); }); }); diff --git a/static/style.css b/static/style.css index f453081..9119a82 100644 --- a/static/style.css +++ b/static/style.css @@ -45,4 +45,29 @@ body{ .navbar-text > a > img{ max-height: 26px; +} + +.glyphicon-spin { + -webkit-animation: spin 1000ms infinite linear; + animation: spin 1000ms infinite linear; +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } \ No newline at end of file