在Shopify admin内的嵌入式应用程序的页面之间添加加载指示器的最简单方法是使用Shopify Polaris框架中提供的Spinner组件。Spinner组件可以显示一个旋转的加载指示器,以告知用户页面正在加载中。
要在嵌入式应用程序的页面中添加Spinner组件,可以按照以下步骤进行操作:
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/5.10.0/polaris.min.css" />
<script src="https://sdks.shopifycdn.com/polaris/5.10.0/polaris.min.js"></script>
<div class="spinner-container">
<div class="spinner"></div>
</div>
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
以上代码定义了一个居中显示的容器和一个旋转的圆形加载指示器。
document.addEventListener("DOMContentLoaded", function() {
var spinnerContainer = document.querySelector(".spinner-container");
spinnerContainer.style.display = "none";
});
以上代码会在页面加载完成后将Spinner组件的容器隐藏起来。
通过以上步骤,就可以在Shopify admin内的嵌入式应用程序的页面之间添加加载指示器。用户在页面加载过程中会看到一个旋转的加载指示器,以提醒他们页面正在加载中。
领取专属 10元无门槛券
手把手带您无忧上云