Restyled the Action Spinner

General
1

Just for fun (and acknowledging Pickaxe HQ may change the underlying code at any time…).

Anyway… I’ve never like the spinner that appears when an Action is triggered (and would really like the option to change it) so I’ve restyled it… welcome to the Knight Rider!

3 Likes
2

Very nice

will you be sharing how you did it ?

3

I’ve posted a few times and the simplest way to work it out is to look at the source of my studio page.

You just need to establish the classes of css to play with… this one is done entirely form within the CSS - Start from here…

  div[style*="pointer-events: none"] svg {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

To hide the existing spinner and then work out what loader/spinner you want to style and inject it.

      div[style*="pointer-events: none"] {
        overflow: hidden !important;
        background-color: transparent !important;
        position: relative !important;
        display: block !important;
      }

      div[style*="pointer-events: none"]::after {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        height: 100%;
        width: 50%;
        background-color: #a80512;
        border-radius: 10px;
        animation: slideBackAndForth 1.5s linear infinite alternate;
        z-index: 1;
      }

      @keyframes slideBackAndForth {
        from { left: -50%; }
        to   { left: 100%; }
      }
1 Like
4

Love this! Nice work, it looks great