Svelte Loading Indicator

By Eric David Smith on March, 15 2020 8:54 PM ~ 2 min read

Over the weekend, I created a personal Todo app using Google Cloud Firestore and Svelte. This combination is such a dream to work with.

Screenshots

Svelte Firestore Todo App Svelte Todo Loading Indicator

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.

<script>
  import chroma from 'chroma-js'
</script>

<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>

<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!


Eric David Smith

Father / Entrepreneur / Student / Teacher / Software Engineer / Recording Artist / Navy Veteran / Runner / Ambivert