I recently wanted to create my own simple loading spinner with just HTML and CSS. Here is the code that I came up with:


<div class="wrapper" style="font-size: 1em;">
  <div class="loading-spinner md" style="background-color: #FFF;"></div>


.loading-spinner.xs {
  font-size: 1em;
.loading-spinner.sm {
  font-size: 2em;
.loading-spinner.md {
  font-size: 4em;
.loading-spinner.lg {
  font-size: 8em;
.loading-spinner.xl {
  font-size: 16em;
.loading-spinner {
  --color1: red;
  --color2: green;
  --color3: blue;
  box-shadow: inset -0.25em -0.25em 0.5em -0.25em var(--color3), 0 0 0.03em 0.015em white, 0 0 0.075em 0.0375em black;
  margin: 0.1em;
  filter: contrast(5);
  --duration: 3s;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  position: relative;
  animation: loading-spinner var(--duration) infinite linear;
  transform: translateZ(0);
  display: inline-block;
  overflow: hidden;
.loading-spinner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
.loading-spinner:before {
  animation-duration: var(--duration);
  box-shadow: inset -0.25em -0.25em 0.5em -0.25em var(--color1);
.loading-spinner:after {
  animation-duration: calc(2 * var(--duration));
  box-shadow: inset -0.25em -0.25em 0.5em -0.25em var(--color2);
@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  100% {
    transform: rotate(360deg);

See It In Action

Below is what it looks like in action. I added a few inputs so that you can play around with the CSS yourself:

Final Thoughts

I feel like there are a lot of ways to improve on the look but the simplicity of the CSS code pretty nice. Now that we don’t have to worry about supporting IE we can keep moving onward into the future. Feel free to use this in your projects and as always, happy coding!!! šŸ˜Ž
Categories: Blog

Leave a Reply

Your email address will not be published. Required fields are marked *