Adding Spinners

[jjspace]

@guastallaigor mentioned adding spinners/loaders on the roadmap so I started work on a few. I created a classic style segmented loading bar as well as a basic spinner. I'm also planning to create a pixel art style hourglass and a standard arc following a circle. Animations to come. I'd love any other suggestions or ideas!

I will create a PR soon with actual samples

[guastallaigor]

Wow, awesome work @jjspace . Looking forward to see that in the framework! 💯

[jjspace]

Trying to clean up my GH and removing old issue assignments. I haven't worked on this in a long time (obviously) and probably won't have time to any time soon. I dug up my old jsfiddle that I used to make these (thankfully I saved it) and anyone can take it and run with it if the project is still missing these and wants to add them.

https://jsfiddle.net/jjspace/s72ebvpc/

<div class="loader-bar"></div>

.loader-bar {
  position: relative;
  margin: 50px;
  height: 40px;
  width: 204px;
  color: lime;
  background: linear-gradient(90deg, lime, lime 200px, green 200px, green 220px, black 0);
  background-size: 408px 40px;
  background-repeat: no-repeat;
  background-position: left -200px top;
  box-shadow: 0 0 0 4px inset black, 0 -4px, 0 -8px black, 4px 0, 8px 0 black, 0 4px, 0 8px black, -4px 0, -8px 0 black, 0 0 0 4px black;
  animation: loading 2s steps(11, end) infinite;
}

.loader-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  height: 100%;
  width: 4px;
  background: black;
  box-shadow: 20px 0 0 0 black, 40px 0 0 0 black, 60px 0 0 0 black, 80px 0 0 0 black, 100px 0 0 0 black, 120px 0 0 0 black, 140px 0 0 0 black, 160px 0 0 0 black;
}

@keyframes loading {
  to {
    background-position: left 20px top;
  }
}