feat: choosing 3 variants that look good

youcan-shop · Jun 19, 2024 · 21ac5f6 · 21ac5f6
1 parent ceb2441
commit 21ac5f6
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 128 deletions.
diff --git a/packages/alto/src/_dev/App.vue b/packages/alto/src/_dev/App.vue
@@ -6,7 +6,7 @@ import { Loader } from '~/components';
 
 <template>
   <div class="container">
-    <Loader type="spinner" />
+    <Loader type="spinner" label="Loading..." />
     <Loader type="brand" />
     <Loader type="bar" />
   </div>

diff --git a/packages/alto/src/components/Loader/Loader.vue b/packages/alto/src/components/Loader/Loader.vue
@@ -13,14 +13,6 @@ const props = withDefaults(
   },
 );
 
-const loaderType = computed (() => {
-  if (['brand', 'bar', 'spinner'].includes(props.type)) {
-    return props.type;
-  }
-
-  return 'spinner';
-});
-
 const loader = computed (() => {
   switch (props.type) {
     case 'brand':
@@ -37,7 +29,7 @@ const loader = computed (() => {
 
 <template>
   <div class="loader-block">
-    <component :is="loader" :type="loaderType" :color="color" :size="size" />
+    <component :is="loader" :color="color" :size="size" />
 
     <p v-if="label" class="label" :class="[labelFontSize]">
       {{ label }}
@@ -50,9 +42,11 @@ const loader = computed (() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 10px;
 }
 
 .loader-block .label {
+  margin: 0;
   color: v-bind("labelColor");
   font: var(--text-md-regular);
 }

diff --git a/packages/alto/src/components/Loader/internal/BarLoading.vue b/packages/alto/src/components/Loader/internal/BarLoading.vue
@@ -5,11 +5,11 @@ defineProps<BarLoadingProps>();
 </script>
 
 <template>
-  <div class="bar-spinner" />
+  <div class="bar-loading" />
 </template>
 
 <style scoped>
-.bar-spinner {
+.bar-loading {
   position: relative;
   width: 160px;
   height: 4px;
@@ -18,7 +18,7 @@ defineProps<BarLoadingProps>();
   background-color: var(--gray-100);
 }
 
-.bar-spinner::before {
+.bar-loading::before {
   content: "";
   display: block;
   width: 100%;

diff --git a/packages/alto/src/components/Loader/internal/BrandLoading.vue b/packages/alto/src/components/Loader/internal/BrandLoading.vue
@@ -12,78 +12,17 @@ const width = computed(() => `${props.size}px`);
 </script>
 
 <template>
-  <div class="brand-loader-block">
-    <div class="brand-loader" :class="type">
-      <div class="shadow-brand">
-        <svg :width="width" :height="height" fill="var(--gray-100)" viewBox="0 0 67 59" xmlns="http://www.w3.org/2000/svg">
-          <path d="M20.4435 0H0L12.7798 29.0835H33.2128L20.4435 0Z" />
-          <path d="M45.9925 0L33.2128 29.0939L20.433 58.167H40.8765L53.6562 29.0939L66.436 0H45.9925Z" />
-        </svg>
-      </div>
-      <div class="animated-brand">
-        <svg :width="width" :height="height" viewBox="0 0 67 59" :fill="color" :stroke="color" xmlns="http://www.w3.org/2000/svg">
-          <path d="M32.4472 28.5835H13.1062L0.765851 0.5H20.1169L32.4472 28.5835Z" />
-          <path d="M33.6705 29.2951L33.6705 29.295L46.319 0.5H65.6703L53.1985 28.8927L53.1984 28.8928L40.5501 57.667H21.1989L33.6705 29.2951Z" />
-        </svg>
-      </div>
-    </div>
-  </div>
+  <svg class="animated-svg" :width="width" :height="height" viewBox="0 0 67 59" :fill="color" :stroke="color" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32.4472 28.5835H13.1062L0.765851 0.5H20.1169L32.4472 28.5835Z" />
+    <path d="M33.6705 29.2951L33.6705 29.295L46.319 0.5H65.6703L53.1985 28.8927L53.1984 28.8928L40.5501 57.667H21.1989L33.6705 29.2951Z" />
+  </svg>
 </template>
 
 <style scoped>
-.brand-loader-block {
-  width: v-bind(width);
-  height: v-bind(height);
-}
-
-.brand-loader {
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.brand-loader .shadow-brand,
-.brand-loader .animated-brand {
-  width: v-bind(width);
-  height: v-bind(height);
-}
-
-.brand-loader .shadow-brand {
-  position: relative;
-  z-index: 1;
-  bottom: 0;
-}
-
-.brand-loader .animated-brand {
-  position: absolute;
-  z-index: 2;
-  bottom: 0;
-  overflow: hidden;
-}
-
-.brand-loader.fill-brand .animated-brand {
-  animation: fill 600ms ease-in-out backwards alternate  infinite;
-}
-
-.brand-loader.draw-brand .shadow-brand svg path {
-  fill: transparent;
-}
-
-.brand-loader.draw-brand .animated-brand svg path {
+.animated-svg path {
   animation: draw 1500ms linear forwards   infinite;
   stroke-dasharray: 163.58;
-  fill: transparent;
-}
-
-.brand-loader .animated-brand svg {
-  position: absolute;
-  bottom: 0;
-}
-
-@keyframes fill {
-  0% { height: 0; }
-  100% { height: 100%; }
+  fill: var(--gray-100);
 }
 
 @keyframes draw {
@@ -92,7 +31,7 @@ const width = computed(() => `${props.size}px`);
   40%,
   50% {
     stroke-dashoffset: 0;
-    fill: transparent;
+    fill: var(--gray-100);
   }
 
   85%,

diff --git a/packages/alto/src/components/Loader/internal/Spinner.vue b/packages/alto/src/components/Loader/internal/Spinner.vue
@@ -9,58 +9,18 @@ const borderWidth = computed(() => `${props.size * 0.1}px`);
 </script>
 
 <template>
-  <div class="spinner-block" :class="type">
-    <div class="spinner" />
-    <div class="shadow" />
-  </div>
+  <div class="spinner" />
 </template>
 
 <style scoped>
-.spinner-block {
-  position: relative;
-  width: v-bind(spinnerSize);
-  height: v-bind(spinnerSize);
-}
-
-.spinner-block > div {
+.spinner {
   box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border: v-bind(borderWidth) solid var(--gray-100);
-  border-radius: 50%;
-}
-
-.spinner-block .spinner {
-  position: absolute;
-  z-index: 2;
+  width: v-bind(spinnerSize);
   animation: s4 1s infinite linear;
-  border-right-color: v-bind(color);
-}
-
-.spinner-block.shadow-spinner .spinner {
-  border: 0;
-  background-image: linear-gradient(177deg, var(--f8a75c4c-color) 15%, var(--gray-100) 93%);
-  mask-image: url("../assets/spinner-shadow.webp");
-  mask-size: v-bind(spinnerSize);
-  mask-repeat: no-repeat;
-}
-
-.spinner-block.shadow-spinner .spinner::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border: v-bind(borderWidth) solid transparent;
+  border: v-bind(borderWidth) solid var(--gray-100);
   border-radius: 50%;
   border-right-color: v-bind(color);
-}
-
-.spinner-block .shadow {
-  position: relative;
-  z-index: 1;
+  aspect-ratio: 1;
 }
 
 @keyframes s4 {

diff --git a/packages/alto/src/components/Loader/types.ts b/packages/alto/src/components/Loader/types.ts
@@ -1,8 +1,8 @@
 export type SpinnerType = 'brand' | 'bar' | 'spinner';
+export type LabelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 interface SharedProps {
   size: number
-  type?: SpinnerType
   color?: string
 }
 export interface BarLoadingProps {
@@ -18,6 +18,6 @@ export interface LoaderProps {
   size?: number
   color?: string
   labelColor?: string
-  labelFontSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  labelFontSize?: LabelSize
   type?: SpinnerType
 }