Spinner button web component
Installation
$ npm install @ayunoshev/spinner-buttonUsage
To stylize, pass some or all of the custom properties from the first example.
To activate spinner programmatically, use method activate(), to stop spinning -
disactivate(). See Codepen
With ES modules
<!doctype html>
<html>
<head>
<title>Example</title>
<script type="module">
import {registerSpinnerButtonComponent} from "./node_modules/@ayunoshev/spinner-button/dist/index.js";
registerSpinnerButtonComponent();
registerSpinnerButtonComponent('spinner-button');
</script>
<style>
.my-style {
--spinner-button-background-color: black;
--spinner-button-background-color--disabled: black;
--spinner-button-border-color: #FF1569;
--spinner-button-text-color: #FF1569;
--spinner-button-text-color--disabled: #1F1F1F;
--spinner-button-inner-spinner-color: #FF1569;
--spinner-button-outer-spinner-color: #FF1569;
}
</style>
</head>
<body
style="background-color:black;
display: grid;
grid-template-columns: repeat(3, max-content);
grid-gap: 20px">
<app-spinner-button id="btn">Call api</app-spinner-button>
<spinner-button class="my-style">Submit</spinner-button>
<script>
document.getElementById('btn').addEventListener('click', () => {
console.log('doing something async...')
});
</script>
</body>
</html>With Angular
In main.ts:
import {registerSpinnerButtonComponent} from '@ayunoshev/spinner-button';
registerSpinnerButtonComponent();And then in the module in which you're going to use the component:
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
@NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
]
})
export class SomeModule {
}Inside some component template of that module:
<app-spinner-button [attr.disabled]="!form.valid">Submit
</app-spinner-button>