Appearance
Spinner
The FTSpinner component replaces the standard html button with a design theme and a multitude of options.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTSpinner } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTSpinner } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTSpinner } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSpinner
}
}
</script><script>
import { FTSpinner } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSpinner
}
}
</script>Usage
INFO
vue
<template>
<FTSpinner></FTSpinner>
</template><template>
<FTSpinner></FTSpinner>
</template>Icon only
INFO
vue
<template>
<FTSpinner icon-only></FTSpinner>
</template><template>
<FTSpinner icon-only></FTSpinner>
</template>Props
| Name | Default | Description |
|---|---|---|
icon-only | false | Wheter to display a random phrase under the icon |
duration | 5000 | Milliseconds to show a phrase before loading a diffrent one |
CSS
| CSS variable | Default Value |
|---|---|
--ft-spinner-image-size | 60px |
--ft-spinner-text-size | 24px |