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 e158443..0000000
Binary files a/postmaster/static/img/loader.gif and /dev/null differ
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('<div class="loader"></div>');
+        // If the spinner isn't there, create it
+        if (spinnerParent.length == 0) {
+            var spinnerParentHtml = $('<div/>', {'class': 'spinnerParent'});
+            var spinnerHtml = $('<div/>', {'class': 'spinner'});
+            spinnerHtml.append($('<div/>', {'class': 'bounce1'}));
+            spinnerHtml.append($('<div/>', {'class': 'bounce2'}));
+            spinnerHtml.append($('<div/>', {'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 @@ <h2 class="textHeadingManage">PostMaster Administrators</h2>
 </div>
 <div class="row">
     <div id="dynamicTableDiv">
-        <div class="loader"></div>
+        {% include 'spinner.html' %}
         <table class="table table-striped table-bordered" id="dynamicTable">
             <thead>
                 <tr>
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 @@ <h2 class="textHeadingManage">Aliases</h2>
 </div>
 <div class="row">
     <div id="dynamicTableDiv">
-        <div class="loader"></div>
+        {% include 'spinner.html' %}
         <table class="table table-striped table-bordered" id="dynamicTable">
             <thead>
                 <tr>
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 @@
     <script src="{{ url_for('static', filename='libraries/js/jquery.typewatch.js') }}"></script>
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/spinner.css') }}">
     <link rel="icon" type="img/ico" href="{{ url_for('static', filename='img/favicon.ico') }}">
     <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
     {% 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 @@ <h2 class="textHeadingManageNoFilter">PostMaster Configurations</h2>
 </div>
 <div class="row">
     <div id="dynamicTableDiv">
-        <div class="loader"></div>
+        {% include 'spinner.html' %}
         <table class="table table-striped table-bordered" id="dynamicTable">
             <thead>
                 <tr>
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 @@ <h2 class="textHeadingManage">Domains</h2>
 </div>
 <div class="row">
     <div id="dynamicTableDiv" class="table-responsive">
-        <div class="loader"></div>
+        {% include 'spinner.html' %}
         <table class="table table-striped table-bordered" id="dynamicTable">
             <thead>
                 <tr>
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 @@ <h2 class="textHeadingManageNoFilter">PostMaster Recent Logs</h2>
 </div>
 <div class="row">
     <div id="dynamicTableDiv">
-        <div class="loader"></div>
+        {% include 'spinner.html' %}
         <table class="table table-striped table-bordered" id="dynamicTable">
             <thead>
                 <tr>
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 @@
+<div class="spinnerParent">
+    <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+    </div>
+</div>
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 @@ <h2 class="textHeadingManage">Users</h2>
 </div>
 <div class="row">
     <div id="dynamicTableDiv">
-        <div class="loader"></div>
+        {% include 'spinner.html' %}
         <table class="table table-striped table-bordered" id="dynamicTable">
             <thead>
                 <tr>