Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

Toggles a loading overlay on a component. When active, it prevents user interaction with the target element and visually indicates that a process is running in the background.

Implementation

Web Component

<div id="spinner-1" aq-spinner='{"show": false}' class="spinner spinner-left">
  Spinner 1 Container
</div>
</div>
<aq-button is-ouline variant="primary" id="button-spinner1">
  Update Spinner 1
</aq-button>

<script>
  let spinner1 = false;
  const buttonSpinner1 = document.querySelector('#button-spinner1');
  const spinnerContent1 = document.querySelector('#spinner-1');

  buttonSpinner1.addEventListener('click', () => {
    spinnerContent1.setAttribute('aq-spinner', `{"show": ${!spinner1}}`);
    spinner1 = !spinner1;
  })
</script>

Vue

<script>
	export default defineComponent({
	  components: {
	    AqButton,
	  },
	  setup() {
	    const spinner1 = ref(true)
	    const handleClick1 = () => {
	      spinner1.value = !spinner1.value
	    }
	    return {
	      handleClick1,
	      spinner1,
	    }
	  },
	})
</script>

<template>
	<div>
	  <div id="spinner-1" :aq-spinner="spinner1" class="spinner spinner-left">
	    Spinner 1 Container
	  </div>
		<aq-button is-ouline variant="primary" id="button-spinner1" @click="handleClick1">
	    Update Spinner 1
	  </aq-button>
	</div>
</template>

React

export const SpinnerDirectiveSet = () => {
  const [spinner1, setSpinner1] = useState(true);

  const handleClick1 = () => {
    setSpinner1(!spinner1);
  };

	return (
		<>
			<div
			  id="spinner-1"
			  aq-spinner={JSON.stringify({ show: spinner1 })}
			  className="spinner spinner-left"
			>
			  Spinner 1 Container
			</div>
			<AqButton
			  is-ouline
			  variant="primary"
			  id="button-spinner1"
			  onClick={() => handleClick1()}
			>
			  Update Spinner 1
			</AqButton>
		</>
	);
};

Angular

	<!-- spinner-directive-set.component.html -->
<div
  #spinner1
  aq-spinner='{"show": false}'
  class="spinner spinner-left"
>
  Spinner 1 Container
</div>
        <aq-button
  is-ouline
  variant="primary"
  id="button-spinner1"
  (click)="toggleSpinner1()"
>
  Update Spinner 1
</aq-button>

// spinner-directive-set.ts

@Component({
  selector: 'app-spinner-directive-set',
  imports: [AqButton],
  templateUrl: './spinner-directive-set.component.html',
})
export class SpinnerDirectiveComponentSet {
  @ViewChild('spinner1', { static: true })
  spinner1Ref!: ElementRef<HTMLDivElement>;

  activeSpinner1 = false;

  toggleSpinner1() {
    this.activeSpinner1 = !this.activeSpinner1;
    this.spinner1Ref.nativeElement.setAttribute(
      'aq-spinner',
      JSON.stringify({ show: this.activeSpinner1 })
    );
  }
}

On this page

✨ Design together. Build together. Speak the same language. ✨