cloud_formation_spinner.js

// ==UserScript==
// @name         CloudFormation 🌈
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  blinky blinky
// @author       You
// @match        https://*.console.aws.amazon.com/*
// @icon         https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/whatsapp/326/rainbow_1f308.png
// @grant        none
// ==/UserScript==

var s = document.createElement('style'),sheet;
// Append style element to head
document.head.appendChild(s);
// Reference to the stylesheet
sheet = s.sheet;

var blink = '.blink {--angle: 0deg; border: 2px solid;';
blink += 'border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;';
blink += 'animation: 2s rotate linear infinite;';
blink += '}';
// Add the first CSS rule to the stylesheet
sheet.insertRule(blink, 0);

var rotate = '@keyframes rotate { to {--angle: 360deg;}}'
sheet.insertRule(rotate, 1);

var angle = "@property --angle {  syntax: '<angle>';  initial-value: 0deg;  inherits: false;}";
sheet.insertRule(angle, 2);

setInterval(function(){
    document.querySelectorAll('.dx-PipelineAction').forEach(element => {
        if (element.innerText.includes("In progress")) {
            element.classList.add('blink');
            element.style.background = "LightCyan";
            element.style.borderImage = "conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1";
            element.style.zIndex = "1000";
        }
    })
},500);