此示例展示了如何在页面上延迟加载元素。我们从一个初始状态开始，看起来像这样
<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;
}