CSSでスピナーや★に色付けをランキングサイトにしてみた

API に問い合わせてデータを取り込み表示するまでの待ち時間、なんの変化もないとフリーズしたみたいだから円環をクルクルまわるスピナーを表示させてみた。

CSSアニメでスピナー

コード

<div id="spinner"></div>

@keyframes spin {
  0% {transform:rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}
#spinner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 20px solid;
  border-color: transparent transparent transparent #bf0000;
  animation: spin 1s linear infinite;
  position: fixed;
  inset:0;
  margin: auto;
}

html ファイルに ID が spinner の divタグを用意。場所はどこでも。スタイルシートに@keyframes 以下をペタッと貼れば、画面中央にスピナーがクルクルまわります。

アニメーション

@keyframes に spin と言う名のアニメーションのキーフレームを設定します。最初 0%は、回転角 0度。50% で 180度。100% で 360度、つまり一回転する transform 変化を設定。コレを #spinner 以下の animationプロパティで読み込み、1s 一秒で linear 直線的に変化させ infinite 無限ループする。

スピナー

正方形の一辺を丸め、そこだけ色付けする。コレで円環の一部分を表現。transparent は、親要素の色を指定するので見えない。position: fixed; で画面の見える範囲に固定表示。inset: 0; margin: auto; で中央を指定。

あとは、JS(JavaScript) で display の値を block で表示 none で非表示を切り替えてます。

const spn=document.querySelector('#spinner');
	spn.style.display="block"; //表示
	spn.style.display="none";  //非表示

CSSで★に色付け

<rate><rate-af>★★★</rate-af>★★★</rate>

rate{
  display: inline-block;
  color: #ccc;
}
rate-af {
  position: absolute;
  color: #ffa500;
  overflow: hidden;
  height: 1.5rem;
}

rateタグに inline-block を指定することで文章の途中に position で指定できる座標をつくる。入れ子の rate-afタグの position を absolute にすることで親要素 rateタグの座標 0 に固定。rate-af の width を JS で可変させ、あふれた部分を overflow: hiddon; とすることで非表示。rem は文字の高さを表す単位だけど、★ はほぼ幅とも同じ。それで ★ 1.5コなんかも表現できる。height は、行の高さ設定次第だけど表示位置がズレないよう1.5rem にしてみた。

ランキングサイト

楽天市場のランキング、公式サイトのトップページにリアルタイムランギングが画像表示で少しある。けれど画像だけだと、なんだかよく判らないものも。アイテム名も含めテキスト込で一覧表示で見たいなぁと思っていたら、楽天ウェブサービスに API があるじゃない。

てことで、楽天ランキングの一覧サイトを作ってみた。CSSのスピナーや★に色付けをしたものの動作サンプルにどうぞ♪