AUI Spinner should be available also in "xsmall" size (same dimensions as an AUI Icon)

Atlassian Ecosystem Design
, ,
1

Currently (AUI 9.7), the smallest spinner is “small”, but even this size is larger than a regular AUI Icon.

If you want to display a spinner and change that to an icon when the work is done, the latter will be smaller. We are talking about a few pixels here, but if you have to align the spinner/icon with some text, then either the text will jump or its distance will be disproportional next to the spinner.

Solution: if we had an “xsmall” spinner that is sized exactly like an AUI Icon, then we could use them interchangedly.

1 Like
2

Hello @aron.gombas
I’ll ask AUI team about an option of adding one more (even smaller) spinner. For now we cannot promise anything in that matter.
I checked the official Spinners - AUI Documentation, and I guess the designers deliberately made the spinner this size to fit the basic button height (as in the example provided).

3

In old AUI version, spinner was just an icon, not its own standalone component. It allowed us to use spinner everywhere in “perfect size” where an icon (16x16 I think) would fit.

I don’t want to change the current sizes, just add another option.

4

I totally understand your concern, but I cannot promise to deliver this feature. I’m passing the decision to the AUI team.

You might, though, consider an option of overriding the spinner’s size to your particular needs, yourself :wink:

5

Hello,

its common issue with the alignment of spinners and icons in Atlassian User Interface (AUI) 9.7. Having an “xsmall” spinner that matches the size of regular AUI icons would definitely streamline your UI design, eliminating those pesky misalignments. While AUI doesn’t currently offer an “xsmall” spinner, here’s a workaround you can use to create a custom-sized spinner that fits your needs:

I fixed the problem with the code below:

Custom CSS Spinner Solution

You can create your own custom spinner using CSS to match the size of a regular AUI icon. Here’s an example of how you could do it:

HTML:

<span class="aui-icon aui-icon-wait aui-icon-xsmall"></span>

CSS:

.aui-icon-xsmall {
    width: 16px;  /* Adjust size to match your AUI icon */
    height: 16px; /* Adjust size to match your AUI icon */
    display: inline-block;
    background: url('path-to-your-spinner.gif') no-repeat center center; /* Replace with your spinner image */
    background-size: contain;
}
  • HTML: <span class="aui-icon aui-icon-wait aui-icon-xsmall"></span> is used to create a span element with the classes that will be styled by your CSS.
  • CSS: .aui-icon-xsmall class is defined to adjust the spinner’s size to 16x16 pixels (you can adjust these dimensions as needed) and apply your spinner image.

Steps to Implement:

  1. Prepare Your Spinner Image: Ensure your custom spinner image is appropriately sized (e.g., 16x16 pixels) and hosted at a reachable URL.
  2. Add the HTML and CSS: Incorporate the HTML and CSS into your project where you need the spinner.

This approach allowed me to have a spinner that aligns perfectly with my text and icons, maintaining visual consistency across your application.

Maybe its helps :slight_smile:

Best regards
Daniel