Pure CSS spinner variations

... no limits for fantasy ...

DUPLICATE PAGE
(see footnote)

1. First result 2. Other color 3. Other background

4. Negative 5. Color changing 6. Scale changing

7. Speed changing 8. Position changing 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 CSS code of 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.Also the eye color is put in a CSS-variable.

Added in the CSS are a 'background' ring around the spinner, and a circular 'border' around the spinner. They are optional: if no color values of these variables are given, they have the background-color of spinner ('transparent').
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 (without a box-shadow) .

Construction

<div class="imgBox">

				  <div class="spinner"></div>

				  <img src="images/..." alt="...">

				</div>

<script> /* none */ <script>

.spinner { /* variables */
--spinner-color: green;
--spinner-bg-color: #EFEFEF;
--spinner-eye-color: white;

				--spinner-outer-ring:

				    0 0 0 5px var(--spinner-bg-color);

				--spinner-outer-border:

				    0 0 0 6px var(--spinner-bg-color);
}

.imgBox { /* nothing changed */
}

.spinner { /* variables inserted */
/* styles from before */
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),

				  radial-gradient(circle at 25px 100px, transparent 24px,

				    var(--spinner-color) 25px);

				border: solid var(--spinner-bg-color);

				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);
}

DUPLICATE PAGE

Notes

All needed styles for the spinner together (version with CSS-variables) you can find in the isolated spinner-var.css file. The specialities for the 9 variations are in the <head> of the source code of this page.
The CSS-validator doesn't recognize the variables yet (jan. 2019), while the Cascading Variables Module of W3C is already a Candidate Recommendation since dec. 2015.
The W3C HTML-validator is giving other results (!). If CSS-variables are put in the <head> / <style> of a document like the original page (back to original page), the HTML-validator agrees with the CSS-variables in general.
But the HTML-validator is considering them as erroneous in the <head> if the CSS-variables are in a gradient background-image as on this duplicate page.
Internet Explorer 11 and some mobile browsers don't know CSS-variables at all. The extended lifetime of IE-11 (security patches) will end together with the extended end of life of Windows-7 (jan. 2020) and Windows-8.1 (jan. 2023); see Support for older versions of Internet Explorer ended and Windows lifecycle fact sheet on microsoft.com.
So to satisfy the IE-11 and all mobile users, for production purposes the CSS-variables should not be used in the first years.