htmx-indicator初始页面加载自动显示问题求助

问题核心是htmx的默认隐藏样式未生效，可能是未正确引入htmx官方样式表，或是现有样式覆盖了默认规则。你可以通过以下两种方式解决：

方法1：确保引入htmx默认样式 #

htmx官方默认CSS中，.htmx-indicator被设置为display: none。如果项目还没引入该样式表，添加即可（使用项目本地资源或合法CDN）。

方法2：手动添加初始隐藏样式 #

如果不想依赖htmx默认样式，直接给指示器元素添加初始隐藏样式即可——htmx在发起请求时会自动触发显示逻辑，无需额外操作：

修改后的HTML代码 #

<div class="spinner-wrapper position-absolute htmx-indicator" style="top:0; left:0; width:100%; height:100%; z-index: 1000; pointer-events:none; display: none;">
    <div class="d-flex justify-content-center align-items-center position-relative" style="height:100%;">
        <div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
        </div>
    </div>
</div>

或者用自定义CSS（推荐，避免内联样式冗余） #

在项目样式文件中添加：

.htmx-indicator {
    display: none;
}

/* 保留htmx请求时的显示逻辑 */
.htmx-request .htmx-indicator {
    display: block;
}

设置完成后，指示器会在页面初始渲染时保持隐藏，仅当htmx触发局部重载请求时才会显示。

内容的提问来源于stack exchange，提问作者Dan K