React Select: How do I replace the loadingIndicator dots with my own image

user_490811 0
Viewed 3169

I've been trying to replace the loadingIndicator's loading animation and I can't seem to be getting it right.

I've tried:

export const reactSelectCustomStyles = (): StylesConfig => ({
  loadingIndicator: (provided) => {

    return {
      ...provided,
      backgroundImage: `url(image url)`,
    };
  },
});

My image does show up on the loading indicator as the background but it doesn't fully replace the 3 animating dots.

Any advice is highly appreciated!

react-select reactjs css
1 Answers

You need to add classNamePrefix="react-select" to the AsyncSelect component and style this .react-select__loading-indicator selector. Here is the Bootstrap styling I've done:

.react-select__loading-indicator {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: .25em solid;
  border-right: .25em solid transparent;
  border-radius: 50%;
  border-width: .2em;
  animation: spinner-border .75s linear infinite;
  color: $color-primary;
  margin-right: 0.75rem;
  font-size: unset;
  padding: 0;
  & > * {
    display: none;
  }
}

This one is to remove dots so I can add my own.

& > * {
  display: none;
}

If you'd like to keep the loading indicator show up while styling, just add isLoading:{true} to the AsyncSelect component.

EDIT:

I've found a way to do it in JS. Here is the link to the documentation: https://react-select.com/components

There is actually a Loading Indicator example as well. I hope this helps.

user_47716230
Related