Svelte Loading Indicator

Posted in category Svelte on
242 Words ~2 Minute Reading Time • Subscribe to receive updates on Svelte
Eric David Smith
Software Engineer / Musician / Entrepreneur
Svelte FireStore Todo App

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.

Svelte Todo Loading Indicator

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


Eric David Smith
Software Engineer / Musician / Entrepreneur
Svelte

Related Blog Posts

Blog Post Tags