🕉 @feelinglovelynow/svelte-loading-anchor

💎 Install

pnpm add @feelinglovelynow/svelte-loading-anchor

🙏 Description

• SvelteKit component that shows a loading icon when clicked and stops loading after the page navigates
• Will not show loading icon if href is to the current page
• Supports <slot /> to add anything in the anchor

💚 Properties

export let href: string = '/'
export let label: string = ''
export let css: string = '' // classes to add to anchor
export let widthRem: number = 1.8 // equivalent to 18px

💛 Prerequisite CSS (available at @feelinglovelynow/global-style)

Requires @feelinglovelynow/global-style or add this css to your site

.fln__circle-load {
  width: 3rem;
  aspect-ratio: 1/1;
  border-width: 0.27rem;
  border-style: solid;
  border-radius: 100%;
  animation: fln__circle-load__spin 0.8s infinite linear;
}

@keyframes fln__circle-load__spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

html { /* Helps w/ rem, can still look good w/o just set rem/px as desired: https://stackoverflow.com/questions/59920538  */
  font-size: 62.5%;
}

🧡 Prerequisite CSS (NOT available at @feelinglovelynow/global-style)

Define how you would love your loading anchor to look

.fln__circle-load { // gold load with transparent background
  border-color: #eac603 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.fln__circle-load { // thicker blue load with grey background
  border-width: 0.36rem;
  border-color: #2e96ff #ccc #ccc;
}

❤️ Examples

<script lang="ts">
  import { LoadingAnchor } from '@feelinglovelynow/svelte-loading-anchor'
</script>

<LoadingAnchor href="/test" label="Test" css="example" />

<LoadingAnchor href="/" label="Home" widthRem={ 3 }>
  <div>Slot content</div>
</LoadingAnchor>

💟 Add custom styling

.fln__loading-anchor {

  &--is-loading {

  }

  &__label {

  }

  .fln__circle-load {

  }
}

🎁 All Our Packages

1. @feelinglovelynow/datetime-local: NPM ⋅ Github
2. @feelinglovelynow/dgraph: NPM ⋅ Github
3. @feelinglovelynow/env-write: NPM ⋅ Github
4. @feelinglovelynow/get-form-entries: NPM ⋅ Github
5. @feelinglovelynow/get-relative-time: NPM ⋅ Github
6. @feelinglovelynow/global-style: NPM ⋅ Github
7. @feelinglovelynow/jwt: NPM ⋅ Github
8. @feelinglovelynow/loop-backwards: NPM ⋅ Github
9. @feelinglovelynow/slug: NPM ⋅ Github
10. @feelinglovelynow/svelte-catch: NPM ⋅ Github
11. @feelinglovelynow/svelte-kv: NPM ⋅ Github
12. @feelinglovelynow/svelte-loading-anchor: NPM ⋅ Github
13. @feelinglovelynow/svelte-modal: NPM ⋅ Github
14. @feelinglovelynow/svelte-turnstile: NPM ⋅ Github
15. @feelinglovelynow/toast: NPM ⋅ Github