Svelte Loading Indicator
Posted in category Svelte on
242 Words ~2 Minute Reading Time • Subscribe to receive updates on Svelte
242 Words ~2 Minute Reading Time • Subscribe to receive updates on Svelte
Over the weekend 03/15/2020, I created a personal Todo app using Google Cloud FireStore and Svelte. This combination is such a dream to work with.
Svelte Loading Indicator
Below you will find the Loading Indicator component I created using Svelte, css3, and Chroma-JS. I plan on refactoring this to use Svelte's internal "transition" library - but for now, this is what I have. Feel free to grab this and use it in your Svelte projects. Unfortunately, I don't have a public GitHub repo to share with you.
First install chromaJS or another color library
<script>
import chroma from "chroma-js";
</script>
Next, add the styles
<style>
.spinner {
margin-top: 25px;
text-align: center;
}
.spinner > div {
width: 50px;
height: 50px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
Finally, add the HTML markup
<div class="spinner">
<div class="bounce1" style="background:{chroma.random()}" />
<div class="bounce2" style="background:{chroma.random()}" />
<div class="bounce3" style="background:{chroma.random()}" />
</div>
Thanks for reading. Happy coding!
Supporting My Work
Please consider Buying Me A Coffee. I work hard to bring you my best content and any support would be greatly appreciated. Thank you for your support!
Contact