Fix #1184 -- Replace loading gif with css animation (#1353)

Author: codingjoe

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -233,8 +233,18 @@
 }
 
 #djDebug .djDebugPanelContent .djdt-loader {
-    display: block;
     margin: 80px auto;
+    border: 6px solid white;
+    border-radius: 50%;
+    border-top: 6px solid #ffe761;
+    width: 38px;
+    height: 38px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 #djDebug .djDebugPanelContent .djdt-scroll {

debug_toolbar/static/debug_toolbar/img/ajax-loader.gif

@@ -8,7 +8,7 @@ <h3>{{ panel.title }}</h3>
     </div>
     <div class="djDebugPanelContent">
       {% if toolbar.store_id %}
-        <img src="{% static 'debug_toolbar/img/ajax-loader.gif' %}" alt="loading" class="djdt-loader">
+        <div class="djdt-loader"></div>
         <div class="djdt-scroll"></div>
       {% else %}
         <div class="djdt-scroll">{{ panel.content }}</div>

debug_toolbar/templates/debug_toolbar/includes/panel_content.html

@@ -37,7 +37,7 @@ def test_escapes_panel_title(self):
             <h3>Title with special chars &amp;&quot;&#39;&lt;&gt;</h3>
             </div>
             <div class="djDebugPanelContent">
-            <img class="djdt-loader" src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading">
+            <div class="djdt-loader"></div>
             <div class="djdt-scroll"></div>
             </div>
             </div>

tests/panels/test_custom.py

@@ -28,7 +28,7 @@ def test_panel_title(self):
             <h3>Settings from None</h3>
             </div>
             <div class="djDebugPanelContent">
-            <img class="djdt-loader" src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading">
+            <div class="djdt-loader"></div>
             <div class="djdt-scroll"></div>
             </div>
             </div>