How to change Spinner(Sending) icon on Form Submit/Send button

How To
1

Hi Everyone!
Is it possible to change the Spinner(Sending) icon on Form Submit/Send button to something else? Can someone help me push me in the right direction on how to accomplish this… Thanks so much…
If you know please help…

1 Like
2

Hello! Anyone can help me with this? … I’m still needing help… Thank you!

3

Hi,

Isn’t there already a solution for that? The default spinner icon conveys more of the meaning of the update. Please add the ability to change the spinner icon if possible.

4

Did anyone find a way to change the spinner icon yet?
@timmse Are we missing something or we can’t set a custom icon as of now?
Many thanks!

5

+1 for this idea

It would also be great if there was an “Icon only” option for the submit button icon, like the add to cart element.

Icon only

bricks team please :heart_eyes:

6

If you select an Icon and remove the Text for the ‘SUBMIT BUTTON’ settings it will only show the icon, it’s just we can’t change the spinner icon you see when the button is clicked.
And when you select an icon for the button it will show both icons when clicked, the one you selected and the spinning arrows, which doesn’t look good ofc.

I changed the spinner icon with CSS and the :after pseudo element (you could use JS as well but I prefer CSS whenever I can) but there should be a straightforward option to change it in the builder, here’s the CSS I used (My button has text and no icon btw, this is just to change the spinner icon):

/* (Optional) I gave the button a relative position so I can place the icon with an absolute one, it looks better than the default behavior which changes the button width when the loading icon appears. Just make sure to give the button enough padding or width */
button[type="submit"] {
  position: relative;
}

/* This is to hide the default spinner icon */
.bricks-button span.loading {
  display: none !important;
}

/* This is to add the custom icon, you can ofc change the size, position, or animation as you wish */
.bricks-button.sending:after {
  content: url("data:URL-TO-YOUR-SVG");
  position: absolute;
  right: 20px;
  width: 15px;
  height: 15px;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Make sure to change “URL-TO-YOUR-SVG” with the actual URL of your custom SVG (In case you want to use an SVG ofc like I did), and you’re better using an inline SVG as your data URL.