Cloudflareの障害レポートの上

先日発生した Cloudflare の障害について、以下の公式ブログにレポートが公開されていました。

• https://blog.cloudflare.com/ja-jp/18-november-2025-outage

内容としては、ボット対策用のフィーチャーファイルが誤って肥大化し、
プロキシがクラッシュしたことで Cloudflare 全体に影響が広がった、というものでした。

障害レポートの上にあった UI

このレポートページを読んでいて気づいたのが、スクロール量に応じて上部の細いバーが伸びていく UI です。

タップして拡大

昔からたまに見る UI ですが、読み物系の記事との相性が本当に良いですね。
「自分がどこまで読んだのか」 がひと目でわかるので、ブログにも付けたくなりました。

サンプルコード

必要なのは、進捗バー用の要素を 1 つ置くだけです。

<div class="progress"></div>

CSS はこれだけ。

.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #3f434f;

  transform-origin: 0 0;
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

たった数行ですが、Cloudflare のレポートページのような
スクロール量に連動して伸びる進捗バー が簡単に作れます。

animation-timeline、想像以上に便利ですね。

対応ブラウザについて

ただし現状、animation-timeline は Firefox が未対応 のようです。

• https://caniuse.com/?search=animation-timeline

Chrome・Safari・Edge では動作するので、必要に応じて採用判断すると良さそうです。

終わりに

いつもお世話になっている Cloudflare、これからも応援しています！