# Restyled the Action Spinner

**URL:** <https://community.pickaxe.co/t/restyled-the-action-spinner/5341>\
**Category:** General\
**Created:** [April 14, 2025, 9:17pm UTC](https://community.pickaxe.co/t/restyled-the-action-spinner/5341 "2025-04-14T21:17:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ecaveo](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.pickaxe.co/ecaveo/32/6396_2.png) [@ecaveo](https://community.pickaxe.co/u/ecaveo)\
**Post date:** [April 14, 2025, 9:17pm UTC](https://community.pickaxe.co/t/restyled-the-action-spinner/5341/1 "2025-04-14T21:17:15Z")

</div>

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!

https://www.youtube.com/embed/mznduUgWjK8?si=rBJwpaOgud3eB-Pp

---

<div class="post-metadata">

**Author:** ![ihmunro](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.pickaxe.co/ihmunro/32/592_2.png) [@ihmunro](https://community.pickaxe.co/u/ihmunro)\
**Post date:** [April 14, 2025, 11:51pm UTC](https://community.pickaxe.co/t/restyled-the-action-spinner/5341/2 "2025-04-14T23:51:28Z")

</div>

Very nice

will you be sharing how you did it ?

---

<div class="post-metadata">

**Author:** ![ecaveo](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.pickaxe.co/ecaveo/32/6396_2.png) [@ecaveo](https://community.pickaxe.co/u/ecaveo)\
**Post date:** [April 15, 2025, 12:17am UTC](https://community.pickaxe.co/t/restyled-the-action-spinner/5341/3 "2025-04-15T00:17:26Z")

</div>

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…

```auto
  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.

```auto
      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%; }
      }

```

---

<div class="post-metadata">

**Author:** ![intheday](https://yyz2.discourse-cdn.com/flex004/user_avatar/community.pickaxe.co/intheday/32/924_2.png) [@intheday](https://community.pickaxe.co/u/intheday)\
**Post date:** [April 17, 2025, 5:08pm UTC](https://community.pickaxe.co/t/restyled-the-action-spinner/5341/4 "2025-04-17T17:08:53Z")

</div>

Love this! Nice work, it looks great