ローディングスピナー

#!/bin/bash
spinner='⣾⣿⣽⣿⣻⣿⢿⣿⡿⣿⣿⢿⣿⡿⣿⣟⣿⣯⣿⣷⣿⣾⣷⣿'
l=${#spinner}
i=0
while :
do
  printf "\010\010"
  printf "${spinner:$i:2}"
  i=$(((i+2)%l))
  sleep 0.1
done

これをcssアニメーションを使ってscssで書くとこんな感じ

<div class="spinner"></div>

$str: (⣾⣿ ⣽⣿ ⣻⣿ ⢿⣿ ⡿⣿ ⣿⢿ ⣿⡿ ⣿⣟ ⣿⣯ ⣿⣷ ⣿⣾ ⣷⣿ ⣾⣿);
@keyframes spin {
  @for $i from 1 through length($str) {
    #{100*($i - 1)/(length($str)- 1)}% {
      content: "#{nth($str, $i)}";
    }
  }
}

.spinner {
  width: 100px;
  height: 100px;

  &::before {
    font-size: 100px;
    display: block;
    content: "#{nth($str, 1)}";
    animation: spin 2s linear infinite;
  }
}

See the Pen spinner by rnitta (@rnitta) on CodePen.