NFY Form Submit Spinners

Installation

npm i @nfy-npm/stimulus-form-submit-spinner

In your entrypoint-js add:
import '@nfy-npm/stimulus-form-submit-spinner'

Link-Submit

Usage

To your HTML add

<div data-controller="link-spinner">
    <a href="#">foo</a>
    <div>
        <a href="#">bar</a>
    </div>
    ...
</div>

Every link within the controller tag will trigger the loading-spinner

Options

You can define a spinner target anywhere within the document by setting a data-linkSpinner-target="spinner-target". When triggered this element will be set to position-relative and an overlay containing the spinner will appear on top of this element.

<div data-linkSpinner-target="spinner-target">
    ...
</div>

For further specification you can also define the id of the element that contains the controller, in case you need to implement multiple different spinners on the same page.

<div data-controller="link-spinner" id="SpinnerId1">
    ...
</div>

<div data-linkSpinner-target="spinner-target" data-linkSpinner-id="#$SpinnerId1">
    ...
</div>

Form-Submit

Usage

To your HTML add

<form data-controller="submit-spinner">
    ...
</form>

you can add the controller anywhere within the form. The script will automatically use the first parent-element with the <form>-tag. E.g.:

<form>
    <div data-controller="submit-spinner">
        ...
    </div>
</form>

Options

At v 0.1.* the data-submitSpinner-target="spinner-target" option is available. When not used the form itself will automatically become the spinner-target. On Submit this target will be set to position-relative and an overlay containing the spinner will appear on top of this element.
You can also use a parent for the option.

<form data-controller="submit-spinner">
    ...
    <button type="submit" data-submitSpinner-target="spinner-target">Send</button>
</form>

OR

<div data-submitSpinner-target="spinner-target" class="some-styles">
    <form data-controller="submit-spinner">
        ...
    </form>
</div>