Animate loading button and new posts arriving

This commit is contained in:
2023-04-07 09:50:02 +02:00
parent c16bfd9c82
commit 20cdd8e688
3 changed files with 110 additions and 8 deletions

View File

@ -0,0 +1,38 @@
<script lang="ts">
export let size: string = '64px';
export let thickness: string = '6px';
</script>
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
<style>
.lds-dual-ring {
display: inline-block;
width: 100%;
height: 100%;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: var(--size);
height: var(--size);
border-radius: 50%;
border: var(--thickness) solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(36deg);
}
75% {
transform: rotate(234deg);
}
100% {
transform: rotate(360deg);
}
}
</style>