CSS - Simple "Spinner" Effect

wait Simple Spinner
wait Slightly Less Simple Spinner

There are any number of "loading" or "wait" icons. This is the one built-in to our developer's template.

It is a pure CSS implementation of a spinning image.

/*
  Create a simple spinner using an inline SVG image and CSS animation.
  To use, apply the class "simple-spinner" to a span element.
  <span class='simple-spinner'></span>
  It defaults to 14px by 14px, but you can adjust the width and height using inline CSS as needed.

  optionally add the 'back-spin' class for a more dynamic spin
  <span class='simple-spinner back-spin'></span>

  You can put anything you want in the span, the spinner will replace the contents
  so you can use the content for screen readers or testing or in case the css fails
  for some reason.
  <span class='simple-spinner'>loading...</span>
*/
@keyframes spinner-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.simple-spinner {
  width: 14px;
  height: 14px;
  cursor: wait;
  animation: spinner-spin 2s linear infinite;
  content: url("data:image/svg+xml,<svg width='100' height='100' viewBox='-15 -15 30 30' xmlns='http://www.w3.org/2000/svg'><path d='M 13 0 A 13 13 0 0 1 6.5 11.25 M -6.5 11.25 A 13 13 0 0 1 -13 0 M -6.5 -11.25 A 13 13 0 0 1 6.5 -11.25' fill='currentColor' stroke='currentColor' stroke-width='1'/></svg>");
}
/* backspin makes the spin a bit more dynamic */
@keyframes back-spin {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(1080deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
.simple-spinner.back-spin {
  animation: back-spin 6s linear infinite;
}

This is included as part of the developer's template starting with version 6.6.4 It may be deployed to earlier versions if other changes have to be made to the codebase.