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、これからも応援しています！
-
シェアする
フォローする
購読する
関連する記事
タグ「フロントエンド」の記事
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま
2026年02月17日
以下の記事で書いた CSSをテストする方法について、試してみました。 https://zenn.dev/silverbirder/articles/df6752b230f04c ソースコードは、以下に置いています。 https://gith