window.location.href下载文件加loading

你可以通过以下步骤实现：

1. 创建一个 loading 动画，可以使用 CSS 或者 JavaScript 实现。

2. 当用户点击下载按钮时，使用 JavaScript 监听事件并触发 loading 动画。

3. 创建一个 <a> 标签，将下载链接赋值给 href 属性。

4. 在 JavaScript 中，使用 window.location.href 将页面重定向到下载链接。

5. 当下载完成后，停止 loading 动画。可以使用 JavaScript 监听下载完成事件来实现。

以下是示例代码：

HTML:

<button id="download-btn">下载文件</button>
<div id="loading"></div>

CSS:

#loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.5);
}

#loading::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #0078FF;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

JavaScript:

const downloadBtn = document.getElementById('download-btn');
const loading = document.getElementById('loading');

downloadBtn.addEventListener('click', () => {
  loading.style.display = 'block'; // 显示 loading 动画
  const downloadUrl = 'https://example.com/file.zip'; // 下载链接
  window.location.href = downloadUrl; // 下载文件
});

window.addEventListener('load', () => {
  loading.style.display = 'none'; // 下载完成，隐藏 loading 动画
});

注意：在某些浏览器中，使用 window.location.href 下载文件可能会出现问题，可以考虑使用其他方式实现文件下载，比如使用 XMLHttpRequest 或者 Fetch API。