OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Adjust near to me refresh animation

Browse Source
This commit is contained in:
Fred Boniface 2024-07-05 01:18:27 +01:00
parent a3bf2af68d
commit bebf2eba99
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/cards/Card.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { fade } from "svelte/transition";
import type { CardConfig } from "./Card.types";
import { IconHelpCircle, IconReload } from "@tabler/icons-svelte";
import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
import Tooltip from "$lib/Tooltip.svelte";
export let config: CardConfig;
@ -20,7 +20,7 @@
{/if}
{#if config.showRefresh}
<button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
<IconReload />
<IconRefresh />
</button>
{/if}
</div>
@ -68,7 +68,8 @@
}
.refreshing {
animation: spin 1s linear infinite;
animation: spin 1.5s linear infinite;
transform-origin: 50% 45%;
}
.content {
@ -90,9 +91,14 @@
@keyframes spin {
0% {
transform: rotate(0deg);
color: white;
}
50% {
color: rgb(185, 185, 255);
}
100% {
transform: rotate(360deg);
transform: rotate(-360deg);
color: white;
}
}
</style>