<template>
    <teleport :to="el">
        <div class="ui-loading" :style="{ zIndex, ['--width']: size + 'px', ['--color']: color }">
            <div class="ui-loading__box">
                <div class="default">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </teleport>
</template>
<script setup>
import { defineProps } from 'vue'
import getZIndex from '../../utils/zindex'

defineProps({
    el: {
        default: 'body',
    },
    size: {
        default: 15,
    },
    color: {
        default: '#fff',
    },
})

const zIndex = getZIndex()
</script>

<script>
export default { name: 'ui-loading' }
</script>
