tor: Refactor showing loader icon

- So that it can be used for other applications also.

- Also remove second status icon in green and use the status loading in
  it's place.  This is more consistent placement of status icon.

- Also reduce the size of the icon as it is not indication for page
  loading (page loading icons are large because they substitute page
  content until it is loaded).  This makes it consistent with other
  status icon.

plinth/modules/tor/templates/tor.html

@@ -27,22 +27,6 @@
     <meta http-equiv="refresh" content="3" />
   {% endif %}
 
-  <style type="text/css">
-    .loader {
-      border: 16px solid #f3f3f3; /* Light grey */
-      border-top: 16px solid #3498db; /* Blue */
-      border-radius: 50%;
-      width: 80px;
-      height: 80px;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-  </style>
-
 {% endblock %}
 
 
@@ -53,10 +37,9 @@
   {% if config_running %}
 
     <p class="running-status-parent">
-      <span class="running-status active"></span>
+      <span class="running-status loading"></span>
       {% trans "Tor configuration is being updated" %}
     </p>
-    <div class="loader"></div>
 
   {% else %}
 

static/themes/default/css/plinth.css

@@ -37,6 +37,21 @@ body {
     background-color: rgb(228, 66, 66);
 }
 
+.running-status.loading {
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 .form-diagnostics-button {
     display: inline-block;
 }