# first.items[].content
1️⃣3️⃣ 480 ❤️ Pure #CSS 1 element #rainbow 🌈 spinner 2017 https://codepen.io/thebabydino/pen/YNj rRo - 1st remake of a thing I first coded in 2013.

I've since made 2 more versions with more modern (and better!) CSS:

2023 https://codepen.io/thebabydino/pen/poG yEyg
2019 https://codepen.io/thebabydino/pen/exw yby

#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

# first.items[].contentMap.en
1️⃣3️⃣ 480 ❤️ Pure #CSS 1 element #rainbow 🌈 spinner 2017 https://codepen.io/thebabydino/pen/YNj rRo - 1st remake of a thing I first coded in 2013.

I've since made 2 more versions with more modern (and better!) CSS:

2023 https://codepen.io/thebabydino/pen/poG yEyg
2019 https://codepen.io/thebabydino/pen/exw yby

#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

# first.items[].attachment[].name
Animated GIF. Shows a round image of an Amur leopard, surrounded by a pastel rainbow border that keeps on spinning.

# first.items[].attachment[].name
From the 2023 version description, techniques over the years:

2013: 1 element and its two pseudos, using two linear gradients (each with 13 hard-coded stops) to emulate a conic one and a pretty hacky technique to rotate the gradient part since animating pseudo-elements was not well supported at the time
2017: 1 element and one of its pseudo-elements, using an actual conic-gradient() and an animation directly on the pseudo-element; a list of 12 stops for the conic-gradient() generated via Sass
2019: 1 element and no pseudo-elements, using two background layers, an image cover and a conic-gradient() with its start angle animated via Houdini; a list of 12 stops for the conic-gradient() generated via Sass
2023: 1 element and no pseudos, no Sass anymore; using two background layers, an image cover and a conic-gradient() with its start angle animated via Houdini and using the longer hue interpolation method to generate a rainbow out of a single hsl() value, which makes Sass unnecessary.