Loading Modal con SVG

LoadingModal.vue

<template>
    <div>
        <span>Loading...</span>
        <!-- https://codepen.io/nikhil8krishnan/pen/rVoXJa -->
        <!-- Loader 6 -->
        <svg version="1.1"
            width="50"
            heigth="50"
        id="L6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <rect fill="none" stroke="#fff" stroke-width="4" x="25" y="25" width="50" height="50">
        <animateTransform
            attributeName="transform"
            dur="0.5s"
            from="0 50 50"
            to="180 50 50"
            type="rotate"
            id="strokeBox"
            attributeType="XML"
            begin="rectBox.end"/>
        </rect>
        <rect x="27" y="27" fill="#fff" width="46" height="50">
        <animate
            attributeName="height"
            dur="1.3s"
            attributeType="XML"
            from="50" 
            to="0"
            id="rectBox" 
            fill="freeze"
            begin="0s;strokeBox.end"/>
        </rect>
        </svg>
    
    </div>
</template>

<style scoped>
div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0px;
    right: 0px;
}
</style>