pnpm add @feelinglovelynow/svelte-loading-anchor
href
is to the current page<slot />
to add anything in the anchorexport 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
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%;
}
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;
}
<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>
.fln__loading-anchor {
&--is-loading {
}
&__label {
}
.fln__circle-load {
}
}