この例では、ページ上で要素を非同期に読み込む方法を示します。次のような初期状態で始めます
<div hx-get="/graph" hx-trigger="load">
<img alt="Result loading..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>
グラフをロードしているときに進行状況インジケータが表示されます。その後グラフが読み込まれ、CSS トランジションにより視界にフェードインされます。
.htmx-settling img {
opacity: 0;
}
img {
transition: opacity 300ms ease-in;
}