svelte-loading-anchor Svelte Themes

Svelte Loading Anchor

Sveltekit component that shows a loading icon when clicked and stops loading after the page navigate

๐Ÿ•‰ @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

Top categories

Loading Svelte Themes