CSSだけで簡易的なくるくる回転するローディングアニメーション

HTMLとCSSだけでくるくる回転するアニメーションを超簡易的に実装する方法です。なにかをローディング中にごまかすためのよくある表示です。テキスト数行だけでの実装です。

See the Pen Untitled by suzuki-navi (@suzuki-navi) on CodePen.

<span class="progress-circular">|</span>

.progress-circular {
  display: inline-block; /* これがないと回転してくれない */
  animation: rotate-z 2s linear infinite; /* 2秒で1回転 */
}
@keyframes rotate-z {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

Vuetifyの v-progress-circular みたいなのが使えればいいのですが、そうは行かない場合にどうぞ。