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