Pure CSS spinner variations

... no limits for fantasy ...

DUPLICATE PAGE
(see footnote)

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

4. Inverted 5. Color change 6. Scale change

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

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 (nov. 2018), while the Cascading Variables Module of W3C is already a Candidate Recommendation since nov. 2015.
The W3C HTML-validator is giving other results (!). If CSS-variables are put in the <head> / <style> of a document like the previous page (back to previous 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.