How to customize position (e.g. top/bottom of a <div>)?

[nakamorichi]

How do I change the location of the progress bar and the spinner? Let's say I have a query <form>, and I want to have the spinner and the progress bar appear at the bottom of the form after user presses <button>. How to achieve this?

[noseglid]

The spinner/loader itself is actually nprogress. You can use any configuration option available by passing a config object as a property: <Spinner config={{ trickleRate: 0.02 }} />.

[apandichi]

To be more precise, for other lazy travelers among these plains...

You need something like this:

<div id='spinner'>
   <Spinner config={{ parent: '#spinner' }} />
</div>

If you're using the default CSS, you need to comment or remove the following

#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

Otherwise, the spinner/loading bar will not be shown at all.

[noseglid]

That's it. Thanks for the example, @apandichi 👍