web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

load-symbol.svelte (2892B)

      1 <script lang="ts">
      2     import { LOADING_STYLE_MAP } from "$lib/utils/styles";
      3     import type { ILoadSymbol } from "@radroots/apps-lib";
      4 
      5     let {
      6         basis = undefined,
      7     }: {
      8         basis?: ILoadSymbol;
      9     } = $props();
     10 
     11     const styles = $derived(
     12         basis?.dim
     13             ? LOADING_STYLE_MAP.get(basis?.dim)
     14             : LOADING_STYLE_MAP.get("sm"),
     15     );
     16 
     17     const num_blades = $derived(basis?.blades || 8);
     18 </script>
     19 
     20 <div
     21     class={`relative flex flex-row justify-center items-center h-[${styles?.dim_1}px] w-[${styles?.dim_1}px] fade-in el-re`}
     22 >
     23     <div
     24         class={`${
     25             num_blades === 12 ? `spinner12 center` : `spinner8 center`
     26         } text-[${styles?.gl_2 || styles?.dim_1}px]`}
     27     >
     28         <div
     29             class={`${
     30                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     31             }`}
     32         ></div>
     33         <div
     34             class={`${
     35                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     36             }`}
     37         ></div>
     38         <div
     39             class={`${
     40                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     41             }`}
     42         ></div>
     43         <div
     44             class={`${
     45                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     46             }`}
     47         ></div>
     48         <div
     49             class={`${
     50                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     51             }`}
     52         ></div>
     53         <div
     54             class={`${
     55                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     56             }`}
     57         ></div>
     58         <div
     59             class={`${
     60                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     61             }`}
     62         ></div>
     63         <div
     64             class={`${
     65                 num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     66             }`}
     67         ></div>
     68         {#if num_blades === 12}
     69             <div
     70                 class={`${
     71                     num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     72                 }`}
     73             ></div>
     74             <div
     75                 class={`${
     76                     num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     77                 }`}
     78             ></div>
     79             <div
     80                 class={`${
     81                     num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     82                 }`}
     83             ></div>
     84             <div
     85                 class={`${
     86                     num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     87                 }`}
     88             ></div>
     89             <div
     90                 class={`${
     91                     num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     92                 }`}
     93             ></div>
     94             <div
     95                 class={`${
     96                     num_blades === 12 ? `spinner12-blade` : `spinner8-blade`
     97                 }`}
     98             ></div>
     99         {/if}
    100     </div>
    101 </div>