schon/storefront/components/ui/loader.vue
Alexandr SaVBaD Waltz 64730a1d4e Features: 1) Add appStore integration for managing search overlay state in search.vue; 2) Enhance expiration date formatting in promocodes.vue with detailed and localized time display; 3) Replace avatar image handling in settings.vue with nuxt-img for better performance and format support;
Fixes: 1) Add missing type annotations for `isSearchActive` in `useSearchUi.ts`; 2) Resolve improper conditional rendering in empty state templates across multiple files; 3) Remove unnecessary `console.log` calls in `goTo` function;

Extra: 1) Update SCSS styles including border thickness, colors, and padding tweaks; 2) Refactor `loader.vue` to use `<span>` instead of `<li>` for dots and adjust size; 3) Clean up obsolete TODOs, comments, and unused imports.
2025-07-15 21:25:51 +10:00

59 lines
No EOL
894 B
Vue

<template>
<div class="loader">
<span class="loader__dots" id="dot-1"></span>
<span class="loader__dots" id="dot-2"></span>
<span class="loader__dots" id="dot-3"></span>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.loader {
display: flex;
gap: 0.6em;
list-style: none;
&__dots {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: $white;
}
}
#dot-1 {
animation: loader-1 0.6s infinite ease-in-out;
}
@keyframes loader-1 {
50% {
opacity: 0;
transform: translateY(-0.3em);
}
}
#dot-2 {
animation: loader-2 0.6s 0.3s infinite ease-in-out;
}
@keyframes loader-2 {
50% {
opacity: 0;
transform: translateY(-0.3em);
}
}
#dot-3 {
animation: loader-3 0.6s 0.6s infinite ease-in-out;
}
@keyframes loader-3 {
50% {
opacity: 0;
transform: translateY(-0.3em);
}
}
</style>