Pure CSS spinner variations

... no limits for fantasy ...

(image src not coded yet)
(image src not coded yet)
(image src not coded yet)
1. First result 2. Other color 3. Other background
(image src not coded yet)
(image src not coded yet)
(image src not coded yet)
4. Inverted 5. Color change 6. Scale change
(image src not coded yet)
(image src not coded yet)
(image src not coded yet)
7. Speed change 8. Position change 9. Mirroring

Variations and variables

Of course the 9 possibilities above aren't the only possible CSS spinners. You can find hundreds of other CSS-only spinners, from simple rotating squares to state of the art concentric moving figures with amazing colors. The 9 above are only some variations to show what kind of things is possible with the snake spinner of the previous page.

To make it quick & easy to adapt and combine, I've replaced the used 'color' and 'background-color' by CSS-variables. Added in the CSS are a 'background' ring around the spinner, and a circular 'border' around the spinner. Both are made with the box-shadow property, so the one-div character of the spinner is maintained. Except example 9, which has a double spinner . Also the eye color is put in a CSS-variable.

Construction

<div class="imgBox">
  <div class="spinner"></div>
  <img src="images/..." alt="...">
</div>
<script> /* none */ <script>
:root {
--spinner-color: green;
--spinner-bg-color: #EFEFEF;
--spinner-eye-color: white;
/* optional:
--spinner-outer-ring: 0 0 0 5px yellow;
--spinner-outer-border: 0 0 0 6px red;
*/
}
.imgBox { /* nothing changed */
}
.spinner {
/* styles from before */
background-color: var(--spinner-color);
background-image:
  radial-gradient(circle at 37px 24px,
    var(--spinner-eye-color) 1.5px, transparent 1.5px),
  radial-gradient(circle at 43px 25px,
    var(--spinner-eye-color) 1.5px, transparent 1.5px);
border: solid var(--spinner-bg-color);
/* optional:
box-shadow:
  var(--spinner-outer-ring),
  var(--spinner-outer-border);
*/
}
.spinner:before {
/* styles from before */
background: var(--spinner-bg-color);
}
.spinner:after {
/* styles from before */
background-image:
  radial-gradient(circle at 19px 0,
    transparent 6px,
    var(--spinner-bg-color) 6px);
}

Notes