這個範例展示如何延遲載入頁面上的元素。我們從一個看起來像這樣的初始狀態開始
<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;
}