Cloudflareの障害レポートの上
先日発生した Cloudflare の障害について、以下の公式ブログにレポートが公開されていました。
内容としては、ボット対策用のフィーチャーファイルが誤って肥大化し、
プロキシがクラッシュしたことで 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 が未対応 のようです。
Chrome・Safari・Edge では動作するので、必要に応じて採用判断すると良さそうです。
終わりに
いつもお世話になっている Cloudflare、これからも応援しています！
シェアする
フォローする
関連する記事
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの
2026-01-20