Something went wrong. Try again.
A simple to-do app focused on tasks that can be completed within a specific time span. taskline.tobinio.dev
Something went wrong. Try again.
747 B · 29 lines
Vue
at main
123456789101112131415161718192021222324252627282930<script setup lang="ts"> defineProps<{ isCappedLeft: boolean; isCappedRight: boolean; }>();</script>
<template> <div class="relative flex h-2 flex-col justify-center w-full"> <div class="absolute top-1/2 flex h-2 w-full -translate-y-1/2 justify-evenly" > <div v-for="n in 6" :key="n" class="bg-secondary h-2 w-0.5 rounded-full" /> </div> <div v-if="isCappedRight" class="z-10 to-background absolute top-1/2 right-0 h-1 w-12 -translate-y-1/2 bg-linear-to-r from-transparent" /> <div v-if="isCappedLeft" class="z-10 to-background absolute top-1/2 left-0 h-1 w-12 -translate-y-1/2 bg-linear-to-l from-transparent" /> <div class="bg-secondary h-0.5 w-full rounded-full" /> </div></template>