Variant Select Animated Gear Icon

Browsing my shop you may have noticed that whenever you get to select a product variant, such as color, or size, you have a rotating cog before the menu. Aethetically amazing, I love this little extra. Here is how I achieved it:

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
function addGears(){
const subString = 'shop';
const subStringTwo = 'shop/p/';
const getURL = window.location.href;
if (getURL.includes(subString)){
let allSelectWrappers = document.querySelectorAll('.variant-select-wrapper');
allSelectWrappers.forEach(function(wrapper) {
const gearDiv = document.createElement('div');
gearDiv.id = "spinner";
gearDiv.classList.add('option-select-gear', 'spinner');
wrapper.appendChild(gearDiv);
	if (getURL.includes(subStringTwo)){
    gearDiv.style.top = '30%';
	} else if (getURL.includes(subString)) {
    gearDiv.style.top = '17%';
	} else { }
		});
	}
}
addGears();
});

CSS:

.option-select-gear {
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/3b177fcd-72b2-462f-a563-e73fd964de8f/Gearicon1.png');
  border: 0px !important;
  width: 25px !important;
  height: 25px !important;
  left: -35px;
  position: absolute;
  pointer-events: none;
}
.spinner {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: rotator 33s linear infinite;
}

You may notice in the Javascript that I use some styling to move the cogs around depending on whether we are in the individual product page, or main shop category view. This was necessary for proper alignment.