<template>
    <section>
        <div
            id="loadingWidget"
            class="animate-spin-ease ease-in rounded-full border-solid border-r-transparent border-l-transparent"
            :class="[width, height, borderWidth, subtle ? '' : 'border-orange']"
            role="status" />
    </section>
</template>

<script>
export default {
    name: "SpinningLoader",
    props: {
        subtle: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: 'w-6'
        },
        height: {
            type: String,
            default: 'h-6'
        },
        borderWidth: {
            type: String,
            default: 'border-4'
        }
    }
}
</script>