gif, simple css (dcode), learn web code loading dots, spinning SVG football, show SMIL animation.

Learn Web Code

<!--spinner-->
        <div class="dots-loading">
          <div></div>
        </div>
<!--spinner-->

/* Dots Loading Animation */
.dots-loading {
  margin: 0 auto;
  text-align: center;
}
.dots-loading::before,
.dots-loading::after {
  content: " ";
}
.dots-loading div,
.dots-loading::before,
.dots-loading::after {
  margin: 35px 5px;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #c4c4c4;
  opacity: 0;
}
.dots-loading::before {
  -moz-animation: opacitychange 1s ease-in-out infinite;
  -webkit-animation: opacitychange 1s ease-in-out infinite;
  -o-animation: opacitychange 1s ease-in-out infinite;
  animation: opacitychange 1s ease-in-out infinite;
}
.dots-loading div {
  -moz-animation: opacitychange 1s ease-in-out 0.33s infinite;
  -webkit-animation: opacitychange 1s ease-in-out 0.33s infinite;
  -o-animation: opacitychange 1s ease-in-out 0.33s infinite;
  animation: opacitychange 1s ease-in-out 0.33s infinite;
  -webkit-animation-fill-mode: infinite;
  animation-fill-mode: infinite;
}
.dots-loading::after {
  -moz-animation: opacitychange 1s ease-in-out 0.66s infinite;
  -webkit-animation: opacitychange 1s ease-in-out 0.66s infinite;
  -o-animation: opacitychange 1s ease-in-out 0.66s infinite;
  animation: opacitychange 1s ease-in-out 0.66s infinite;
  -webkit-animation-fill-mode: infinite;
  animation-fill-mode: infinite;
}
@keyframes opacitychange {
  0%,
  100% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
@-webkit-keyframes opacitychange {
  0%,
  100% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}

Overall

Can have in the button itself or a separate place in UI

Prevent Flashing

If you are showing a loading spinner while some request is being made and the request finishes very quickly you may get some flashing all the spinner is shown then hidden. This will be more and more obvious depending on how much the UI changes in the loading state.

Naturally the less the UI changes the less the flickering will be obvious. It’s also includes like button color in addition to element size.

In addition to minimizing how much the UI changes, You could put in a minimum wait time using a setTimeout. It seems silly to intentionally delay results but the flashing issue can be bad.

You could also try to prevent flickering by adding a timing delay value to the CSS transition property. This definitely has its place but not a full solution here. In my case it was still showing on certain response times.