Drop 3rd party libraries
Closed this issue · 3 comments
meigo commented
Nice lib, thanks.
Suggestion though, no need to use emotion lib, svelte has everything that's needed:
<script>
import {range} from './utils';
export let size = 60;
export let color = '#FFFFFF';
export let unit = 'px';
</script>
<style>
.wrapper {
height: var(--size);
width: var(--size);
display: flex;
align-items: center;
justify-content: center;
}
.dot {
height: var(--dotSize);
width: var(--dotSize);
background-color: var(--color);
margin: 2px;
display: inline-block;
border-radius: 100%;
animation: sync 0.6s ease-in-out infinite alternate both running;
}
@keyframes sync {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}
</style>
<div class="wrapper" style="--size:{size}{unit}">
{#each range(1, 3) as i}
<div class="dot" style="--dotSize:{size * 0.25}{unit}; --color:{color}; animation-delay: {i * 0.1}s;" />
{/each}
</div>
meigo commented
👍