Adds css animation for pending create status

Co-authored-by: Fabien Basmaison <contact@arkhi.org>
This commit is contained in:
Mouse Reeve 2021-09-10 08:30:28 -07:00
parent 136cc1a6e9
commit 718744a92d
2 changed files with 30 additions and 1 deletions

View file

@ -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
******************************************************************************/

View file

@ -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>