Svelte Loading Indicator

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 {
    ,
    ,
     {
      -webkit-: ();
    }
     {
      -webkit-: ();
    }
  }
   sk-bouncedelay {
    ,
    ,
     {
      -webkit-: ();
      : ();
    }
     {
      -webkit-: ();
      : ();
    }
  }

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!