feat(Progress): new component (#697)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Italo
2023-10-27 11:01:47 -03:00
committed by GitHub
parent f5f76cc77e
commit 2c5559b73e
9 changed files with 634 additions and 0 deletions

View File

@@ -0,0 +1,34 @@
<template>
<UProgress class="progress">
<template #indicator>
<div class="text-right text-amber-500">
🔥 This is too hot!
</div>
</template>
</UProgress>
</template>
<style scoped>
.progress:deep(progress:indeterminate.animation-default) {
&:after {
@apply w-full text-red-500;
animation: my-glow-animation 3s ease-in-out infinite;
}
&::-webkit-progress-value {
@apply w-full text-red-500;
animation: my-glow-animation 3s ease-in-out infinite;
}
&::-moz-progress-bar {
@apply w-full text-red-500;
animation: my-glow-animation 3s ease-in-out infinite;
}
}
@keyframes my-glow-animation {
50% {
@apply text-amber-400;
}
}
</style>