From d88978ead121df402ca5832710b931fc1f4ceb89 Mon Sep 17 00:00:00 2001 From: mprahl Date: Fri, 28 Oct 2016 19:40:37 -0400 Subject: [PATCH] Replace GIF spinner with CSS spinner --- docs/ChangeLog.md | 3 ++ postmaster/static/css/spinner.css | 55 ++++++++++++++++++++++++++++++ postmaster/static/css/styles.css | 9 ----- postmaster/static/img/loader.gif | Bin 4176 -> 0 bytes postmaster/static/js/utils.js | 23 ++++++++----- postmaster/templates/admins.html | 2 +- postmaster/templates/aliases.html | 2 +- postmaster/templates/base.html | 1 + postmaster/templates/configs.html | 2 +- postmaster/templates/domains.html | 2 +- postmaster/templates/logs.html | 2 +- postmaster/templates/spinner.html | 7 ++++ postmaster/templates/users.html | 2 +- 13 files changed, 86 insertions(+), 24 deletions(-) create mode 100644 postmaster/static/css/spinner.css delete mode 100644 postmaster/static/img/loader.gif create mode 100644 postmaster/templates/spinner.html diff --git a/docs/ChangeLog.md b/docs/ChangeLog.md index c1997a5..ca80af3 100644 --- a/docs/ChangeLog.md +++ b/docs/ChangeLog.md @@ -11,6 +11,9 @@ Features: * Supports Two-Factor Authentication on the backend [GH-169] +Improvements: + +* Replaced GIF spinner with a pure CSS spinner using CSS3 animations [GH-177]. ### v1.1.0 - A Hard Day's Night diff --git a/postmaster/static/css/spinner.css b/postmaster/static/css/spinner.css new file mode 100644 index 0000000..a5cd168 --- /dev/null +++ b/postmaster/static/css/spinner.css @@ -0,0 +1,55 @@ +/* Parent div for gradient */ +.spinnerParent { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.6); +} + +/* Parent div for the circles */ +.spinner { + position: absolute; + left: 50%; + top: 50%; + width: 70px; + margin: 0px auto; +} + +/* Taken from http://tobiasahlin.com/spinkit/ */ + +.spinner > div { + width: 18px; + height: 18px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} + +.spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} diff --git a/postmaster/static/css/styles.css b/postmaster/static/css/styles.css index 62233a3..63b1118 100644 --- a/postmaster/static/css/styles.css +++ b/postmaster/static/css/styles.css @@ -196,15 +196,6 @@ ul.pagination li.disabled a:hover { margin: auto; width: 60%; } - -.loader { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.7) url('/static/img/loader.gif') no-repeat 50%; -} /* End of Manage Page CSS */ /* Only Domains Page CSS */ diff --git a/postmaster/static/img/loader.gif b/postmaster/static/img/loader.gif deleted file mode 100644 index e15844396f9b8c4d915f5cf595e2a22014a24426..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4176 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 Y#`Dx6nd>%kIx0NRp)dR0fBtX$58}9UkpKVy diff --git a/postmaster/static/js/utils.js b/postmaster/static/js/utils.js index fdba53e..478c810 100644 --- a/postmaster/static/js/utils.js +++ b/postmaster/static/js/utils.js @@ -51,20 +51,25 @@ function changePage(obj, e) { // This manages the loading spinner for the table function manageSpinner(present) { - var spinner = $('div.loader'); + var spinner = $('div.spinner'); + var spinnerParent = $('div.spinnerParent'); if (present) { - if (spinner.length == 0) { - $('#dynamicTableDiv').prepend('
'); + // If the spinner isn't there, create it + if (spinnerParent.length == 0) { + var spinnerParentHtml = $('
', {'class': 'spinnerParent'}); + var spinnerHtml = $('
', {'class': 'spinner'}); + spinnerHtml.append($('
', {'class': 'bounce1'})); + spinnerHtml.append($('
', {'class': 'bounce2'})); + spinnerHtml.append($('
', {'class': 'bounce3'})); + spinnerParentHtml.append(spinnerHtml); + + $('#dynamicTableDiv').prepend(spinnerParentHtml); } } else { - // Remove the spinner but keep the gray background with opacity - spinner.css('background', 'rgba(255, 255, 255, 0.7)'); - // Remove the gray background with opacity after 300 ms - setTimeout(function () { - spinner.fadeOut('fast', function() { spinner.remove() }); - }, 400); + // Remove the spinner + spinner.fadeOut(500, function() { spinnerParent.remove(); }); } } diff --git a/postmaster/templates/admins.html b/postmaster/templates/admins.html index 5e9ca54..ab012af 100644 --- a/postmaster/templates/admins.html +++ b/postmaster/templates/admins.html @@ -16,7 +16,7 @@

PostMaster Administrators

-
+ {% include 'spinner.html' %} diff --git a/postmaster/templates/aliases.html b/postmaster/templates/aliases.html index d202491..322668e 100644 --- a/postmaster/templates/aliases.html +++ b/postmaster/templates/aliases.html @@ -16,7 +16,7 @@

Aliases

-
+ {% include 'spinner.html' %}
diff --git a/postmaster/templates/base.html b/postmaster/templates/base.html index 91375da..26536e0 100644 --- a/postmaster/templates/base.html +++ b/postmaster/templates/base.html @@ -14,6 +14,7 @@ + {% block head %}{% endblock %} diff --git a/postmaster/templates/configs.html b/postmaster/templates/configs.html index dbe7f3d..7e7c101 100644 --- a/postmaster/templates/configs.html +++ b/postmaster/templates/configs.html @@ -10,7 +10,7 @@

PostMaster Configurations

-
+ {% include 'spinner.html' %}
diff --git a/postmaster/templates/domains.html b/postmaster/templates/domains.html index c032010..25c19ed 100644 --- a/postmaster/templates/domains.html +++ b/postmaster/templates/domains.html @@ -16,7 +16,7 @@

Domains

-
+ {% include 'spinner.html' %}
diff --git a/postmaster/templates/logs.html b/postmaster/templates/logs.html index f606e9a..f90d060 100644 --- a/postmaster/templates/logs.html +++ b/postmaster/templates/logs.html @@ -10,7 +10,7 @@

PostMaster Recent Logs

-
+ {% include 'spinner.html' %}
diff --git a/postmaster/templates/spinner.html b/postmaster/templates/spinner.html new file mode 100644 index 0000000..4f4af81 --- /dev/null +++ b/postmaster/templates/spinner.html @@ -0,0 +1,7 @@ +
+ +
diff --git a/postmaster/templates/users.html b/postmaster/templates/users.html index 7c0eb27..9696f78 100644 --- a/postmaster/templates/users.html +++ b/postmaster/templates/users.html @@ -16,7 +16,7 @@

Users

-
+ {% include 'spinner.html' %}