Spinner nativo con CSS

¡Mira mamá, solo con CSS!

A veces necesito implementar un spinner en algúna web. Pues se pueden crear con CSS plano. Nada de SVGs, iconos o historias. Aquí dejo el código.

.spinner{
    display: inline-block;
    
    /* Ajustar esta sección al gusto */
    height: 2rem;
    width: 2rem;
    opacity: 50%;
    
    border: 0.35rem  solid; /* Ajustar el espesor */
    border-color: black; /* Ajustar el color */
    border-left-color: transparent;
    border-radius: 50%;
    
    animation: spin linear  1s  infinite;
}

@keyframes  spin{
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

Componente en Vue

Voy a hacer que acepte unas props que definiran el color y transparencia. Con TS ahora cuando utilize el componente me va a obligar a respetar esta convención.

<script  setup  lang="ts">
    import {defineProps,withDefaults} from  'vue'
    const  props  =  withDefaults(defineProps<{
        color?:string
        opacity?:number
    }>(),{
        color:'black',
        opacity:100,
    })
</script>

En este caso paso las props direcamente como estilos en linea.

<template>
    <span :style="`color:${props.color}; opacity:${props.opacity}%`"></span>
</template>

Por ultimo le agrego los estilos anteriores con la propiedad scoped para que solo afecten a este componente.

<style  scoped>
    span{
        display: inline-block;
        height: 2rem;
        width: 2rem;
        opacity: 50%;
        border: 0.35rem  solid;
        border-radius: 50%;
        border-left-color: transparent;
        animation: spin linear  1s  infinite;
    }

    @keyframes  spin{
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

¡Ya tenemos un spinner reutilizable! Aquí el codigo usado para sacar el gif de arriba.

<template>
    <main>
        <div>
            <Spinner  ></Spinner>
            <Spinner  :opacity="50"></Spinner>
            <Spinner  color="red"></Spinner>
            <Spinner  color="blue"></Spinner>
            <Spinner  color="green"></Spinner>
        </div>
    </main>
</template>