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、これからも応援しています！
-
※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「フロントエンド」の記事
Webフロントエンドのコードレビューをしているときに考えていることについて書きます。 毎日1記事投稿、1記事30分という制約を課していますので、本記事は完璧ではありません。(言い訳) また希望的な考えもあるので、実践していないものもあります
2026年03月12日
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ