Adds css animation for pending create status

Co-authored-by: Fabien Basmaison <contact@arkhi.org>

bookwyrm/static/css/bookwyrm.css

@@ -302,6 +302,32 @@ body {
     right: 0;
 }
 
+/** Animations and transitions
+ ******************************************************************************/
+
+@keyframes turning {
+    from { transform: rotateZ(0deg); }
+    to { transform: rotateZ(360deg); }
+}
+
+.is-processing .icon-spinner::before {
+    animation: turning 1.5s infinite linear;
+}
+
+.icon-spinner {
+    display: none;
+}
+
+.is-processing .icon-spinner {
+    display: flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .is-processing .icon::before {
+        transition-duration: 0.001ms !important;
+    }
+}
+
 /* States
  ******************************************************************************/
 

bookwyrm/templates/snippets/create_status/post_options_block.html

@@ -16,7 +16,10 @@
         </div>
     </div>
     <div class="column is-narrow">
-        <button class="button is-link" type="submit">{% trans "Post" %}</button>
+        <button class="button is-link" type="submit">
+            <span class="icon icon-spinner" aria-hidden="true"></span>
+            <span>{% trans "Post" %}</span>
+        </button>
     </div>
 </div>