Customizing login spinner colors

[marmarquez]

Hi!

I would like know how change the color of the login spinner in the Store Theme?

[georgebrindeiro]

Hi @marmarquez! You should be able to style it using the vtex__icon-spinner CSS class. Check out this documentation to understand how styling works in Store Framework stores:

5. Defining styles

[marmarquez]

Thanks for the info.

I’ve reviewed that documentation, but since I can’t locate that element with the inspector I can’t get more information about its tachyon classes, I don’t know which ones correspond to it.

On the other hand, the vtex__icon-spinner class, which app does it come from? how could i style it?

[georgebrindeiro]

@marmarquez

I’ve reviewed that documentation, but since I can’t locate that element with the inspector I can’t get more information about its tachyon classes, I don’t know which ones correspond to it.

Yes, I understand! I had the same issue here, had to reach out to the developer responsible for the login component. Later I figured out that I could use the Chrome DevTools Debugger to pause my code with breakpoints when the Spinner became visible.

@marmarquez

On the other hand, the vtex__icon-spinner class, which app does it come from? how could i style it?

It’s the vtex.login app, responsible for the login component in Store Theme.

I found two ways to style it:

• Create a new /styles/css/vtex.login.css file in your theme with the content below:

  :global(.vtex__icon-spinner) {
    color: #00f;
  }
  

• Change the hex code in the semanticColors.text.emphasis variable of the /styles/configs/style.json file for your theme¹

  ¹ Note: this will also affect other elements that use that semantic color

[marmarquez]

Ooh! Many thanks! You gave me very useful information!