@lukso/web-components 1.3.1 → 1.5.0

package/src/components/lukso-icon/icons/profile-restore.ts

@@ -0,0 +1,50 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const profileRestore = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M3.84377 10.6109L2.26123 9.28296"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 13H2"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6 10V8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18.25 6C18.25 8.34721 16.3472 10.25 14 10.25C11.6528 10.25 9.75 8.34721 9.75 6C9.75 3.65279 11.6528 1.75 14 1.75C16.3472 1.75 18.25 3.65279 18.25 6Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M4.75 18.6667C4.75 16.8725 6.09998 15.4016 8.10179 14.3324C10.0797 13.2759 12.4587 12.75 14 12.75C15.5413 12.75 17.9203 13.2759 19.8982 14.3324C21.9 15.4016 23.25 16.8725 23.25 18.6667V21.25H4.75V18.6667Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/profile.ts

@@ -0,0 +1,29 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const profile = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M16.25 6C16.25 8.34721 14.3472 10.25 12 10.25C9.65279 10.25 7.75 8.34721 7.75 6C7.75 3.65279 9.65279 1.75 12 1.75C14.3472 1.75 16.25 3.65279 16.25 6Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M2.75 18.6667C2.75 16.8725 4.09998 15.4016 6.10179 14.3324C8.07966 13.2759 10.4587 12.75 12 12.75C13.5413 12.75 15.9203 13.2759 17.8982 14.3324C19.9 15.4016 21.25 16.8725 21.25 18.6667V21.25H2.75V18.6667Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/progress-complete.ts

@@ -0,0 +1,289 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const progressComplete = (options: IconOptions) => {
+  return html`<svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <g clip-path="url(#clip0_1438_17663)">
+      <g filter="url(#filter0_ddd_1438_17663)">
+        <circle cx="20" cy="20" r="20" fill="#F8FAFB" />
+      </g>
+      <g filter="url(#filter1_ii_1438_17663)">
+        <path
+          d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5C11.7157 5 5 11.7157 5 20Z"
+          fill="#F8FAFB"
+        />
+      </g>
+      <g filter="url(#filter2_i_1438_17663)">
+        <path
+          d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5C11.7157 5 5 11.7157 5 20Z"
+          fill="url(#paint0_linear_1438_17663)"
+        />
+      </g>
+      <g filter="url(#filter3_di_1438_17663)">
+        <path
+          d="M27 15.3381L17.4837 25.1263L14.9216 22.3296L13.6405 20.9313L13 20.2322"
+          stroke="url(#paint1_linear_1438_17663)"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_ddd_1438_17663"
+        x="-42"
+        y="-42"
+        width="124"
+        height="124"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology
+          radius="2"
+          operator="dilate"
+          in="SourceAlpha"
+          result="effect1_dropShadow_1438_17663"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="20" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.973333 0 0 0 0 0.853333 0 0 0 0 0.826667 0 0 0 0.34 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1438_17663"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="-1" dy="-1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_1438_17663"
+          result="effect2_dropShadow_1438_17663"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="1" dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect2_dropShadow_1438_17663"
+          result="effect3_dropShadow_1438_17663"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect3_dropShadow_1438_17663"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter1_ii_1438_17663"
+        x="-2"
+        y="-2"
+        width="44"
+        height="44"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="2" dy="2" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="shape"
+          result="effect1_innerShadow_1438_17663"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="-2" dy="-2" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_innerShadow_1438_17663"
+          result="effect2_innerShadow_1438_17663"
+        />
+      </filter>
+      <filter
+        id="filter2_i_1438_17663"
+        x="0"
+        y="0"
+        width="41"
+        height="41"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="1" dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="shape"
+          result="effect1_innerShadow_1438_17663"
+        />
+      </filter>
+      <filter
+        id="filter3_di_1438_17663"
+        x="10"
+        y="13.3381"
+        width="20"
+        height="15.7882"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.827451 0 0 0 0 0.682353 0 0 0 0 0.705882 0 0 0 0.5 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1438_17663"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1438_17663"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="-1" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.17 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="shape"
+          result="effect2_innerShadow_1438_17663"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear_1438_17663"
+        x1="31"
+        y1="24"
+        x2="-22"
+        y2="-9.5"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F8DAD3" />
+        <stop offset="1" stop-color="#CC99AE" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_1438_17663"
+        x1="23.85"
+        y1="21.211"
+        x2="9.56459"
+        y2="8.2962"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#F8DAD3" />
+        <stop offset="1" stop-color="#CC99AE" />
+      </linearGradient>
+      <clipPath id="clip0_1438_17663">
+        <rect width="40" height="40" fill="white" />
+      </clipPath>
+    </defs>
+  </svg> `
+}

package/src/components/lukso-icon/icons/progress-indicator.ts

@@ -0,0 +1,236 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const progressIndicator = (options: IconOptions) => {
+  return html`<svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style=${styleMap({
+        width: `${options.width}px`,
+        height: `${options.height}px`,
+      })}
+    >
+      <g clip-path="url(#clip0_1744_19360)">
+        <g filter="url(#filter0_ddd_1744_19360)">
+          <circle cx="20" cy="20" r="20" fill="#F8FAFB" />
+        </g>
+        <g filter="url(#filter1_ii_1744_19360)">
+          <path
+            d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM5 20C5 28.2843 11.7157 35 20 35C28.2843 35 35 28.2843 35 20C35 11.7157 28.2843 5 20 5C11.7157 5 5 11.7157 5 20Z"
+            fill="#F8FAFB"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_ddd_1744_19360"
+          x="-42"
+          y="-42"
+          width="124"
+          height="124"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feMorphology
+            radius="2"
+            operator="dilate"
+            in="SourceAlpha"
+            result="effect1_dropShadow_1744_19360"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="20" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.973333 0 0 0 0 0.853333 0 0 0 0 0.826667 0 0 0 0.34 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1744_19360"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="-1" dy="-1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_dropShadow_1744_19360"
+            result="effect2_dropShadow_1744_19360"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="1" dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect2_dropShadow_1744_19360"
+            result="effect3_dropShadow_1744_19360"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect3_dropShadow_1744_19360"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_ii_1744_19360"
+          x="-2"
+          y="-2"
+          width="44"
+          height="44"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="2" dy="2" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_1744_19360"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="-2" dy="-2" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="effect1_innerShadow_1744_19360"
+            result="effect2_innerShadow_1744_19360"
+          />
+        </filter>
+        <clipPath id="clip0_1744_19360">
+          <rect width="40" height="40" fill="white" />
+        </clipPath>
+      </defs></svg
+    ><svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style=${styleMap({
+        width: `${options.width}px`,
+        height: `${options.height}px`,
+      })}
+      class="absolute animate-spin"
+    >
+      <g clip-path="url(#clip0_1744_19359)">
+        <g filter="url(#filter0_i_1744_19359)">
+          <path
+            d="M37.5 20C38.8807 20 40.0161 21.1236 39.844 22.4935C39.5295 24.9957 38.7437 27.4237 37.5201 29.646C35.8933 32.6008 33.5456 35.0962 30.6954 36.8999C27.8452 38.7037 24.5851 39.7574 21.2184 39.9629C17.8516 40.1683 14.4876 39.519 11.4392 38.0752C8.39078 36.6314 5.75706 34.4401 3.78299 31.7051C1.80892 28.97 0.558635 25.7802 0.148441 22.4322C-0.261752 19.0842 0.181468 15.6869 1.43687 12.5562C2.38109 10.2015 3.76167 8.05527 5.49841 6.22669C6.44925 5.22556 8.0379 5.39214 8.91267 6.46039V6.46039C9.78744 7.52863 9.61127 9.09217 8.70295 10.132C7.59699 11.3982 6.70777 12.8458 6.07766 14.4171C5.1361 16.7652 4.80369 19.3132 5.11133 21.8242C5.41898 24.3351 6.35669 26.7275 7.83724 28.7788C9.31779 30.8301 11.2931 32.4735 13.5794 33.5564C15.8657 34.6392 18.3887 35.1263 20.9138 34.9721C23.4388 34.818 25.8839 34.0278 28.0216 32.675C30.1592 31.3221 31.92 29.4506 33.1401 27.2345C33.9566 25.7515 34.5132 24.1463 34.7921 22.4885C35.0212 21.1269 36.1193 20 37.5 20V20Z"
+            fill="url(#paint0_linear_1744_19359)"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_i_1744_19359"
+          x="0"
+          y="5.5603"
+          width="40.8613"
+          height="35.4397"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="1" dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_1744_19359"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_1744_19359"
+          x1="31"
+          y1="24"
+          x2="-22"
+          y2="-9.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#F8DAD3" />
+          <stop offset="1" stop-color="#CC99AE" />
+        </linearGradient>
+        <clipPath id="clip0_1744_19359">
+          <rect width="40" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>`
+}

package/src/components/lukso-icon/icons/pulse-dot.ts

@@ -0,0 +1,22 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const pulseDot = (options: IconOptions) => {
+  return html`<div
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+    class="flex items-center justify-center text-16"
+  >
+    <div
+      class="w-[83.3%] h-[83.3%] rounded-full flex items-center justify-center bg-neutral-90"
+    >
+      <div
+        class="w-[60%] h-[60%] rounded-full animate-pulse-resize bg-green-54"
+      ></div>
+    </div>
+  </div>`
+}