CSSの三角関数を活用してローダーをつくる

CSSで三角関数（sin()、cos()など）が使えるようになった。社会では役に立たないと言われがちな三角関数だが、全然そんなことない！！

ブラウザの対応状況は以下のとおり。

ドットローダーをつくる

<div class="loader">
  <div class="dot" style="--index: 1"></div>
  <div class="dot" style="--index: 2"></div>
  <div class="dot" style="--index: 3"></div>
  <div class="dot" style="--index: 4"></div>
  <div class="dot" style="--index: 5"></div>
  <div class="dot" style="--index: 6"></div>
  <div class="dot" style="--index: 7"></div>
  <div class="dot" style="--index: 8"></div>
</div>

.loader {
  position: relative;
}

.dot {
  position: absolute;

  /* 8つのドットを表示するので360°を8分割する */
  --angle: calc((360deg / 8) * var(--index));
  top: calc(sin(var(--angle)) * 50px);
  left: calc(cos(var(--angle)) * 50px);

  /*　ドットスタイルは省略  */

  animation: 2s linear calc(var(--index) * 250ms) infinite flash;
}

JavaScriptのMath.sin()やMath.cos()では、引数をラジアン（弧度法）に変換しなければならないのだが、CSSの三角関数は優秀で角度（度数法）のdegを渡すだけでよい。

一般的にx軸（top）にはsin()、y軸（left）にはcos()を使うが、今回の場合はとくに気にしなくても良い。

補足

.dot要素の順番に--indexというCSS変数を使った。

できることならcounter()でindexのカウントを自動化したかったのだが、仕様検討時に何度か提案されたもののブラウザの処理が重くなるという理由で却下されたそうだ。

The current counter() function outputs a <string>, so it can’t be used directly in calc(). （略）Counters are surprisingly expensive in browsers,（略）

引用: Re: [css-values] CSS counters inside CALC function from Tab Atkins Jr. on 2016-08-30 (www-style@w3.org from August 2016)

デモ