<!-- Generated by SpecStory -->

# 加载指示器样式与进度显示设计 (2025-05-27 19:02:19)

_**User**_

加载指示器放到预览容器的右下角。样式重新设计一下。需要显示当前下载的进度 1MB/XXMB 这种

---

_**Assistant**_

我来帮你重新设计加载指示器，将它移到右下角并添加文件大小进度显示。

首先，我需要修改代码来跟踪下载的字节数和总字节数：

---



---

现在我需要在重置状态时也重置这些新的状态：

---



---

现在更新进度跟踪的逻辑：

---



---

现在重新设计加载指示器，移到右下角并使用新的样式和字节显示：

---



---

完成！我已经重新设计了加载指示器，主要改进包括：

### 主要变化：

1. **位置调整**：从居中移到了右下角（`bottom-4 right-4`）
2. **样式重新设计**：
   - 更紧凑的设计，使用横向布局
   - 更现代的圆角和边框样式
   - 半透明黑色背景配白色边框
3. **进度显示增强**：
   - 显示百分比进度
   - 显示实际下载字节数（如 "1.2MB / 5.6MB"）
   - 使用 `tabular-nums` 确保数字对齐
4. **动画效果**：添加了缩放和位移的进入/退出动画
5. **信息层次**：
   - 顶部显示状态（HEIC/加载中）和百分比
   - 底部显示具体的字节进度

### 新的特性：
- 文件大小进度以 MB 为单位显示，保留一位小数
- 不同状态下的智能显示（转换中时只显示转换状态）
- 只有在有总字节数时才显示具体的 MB 进度
- 更小巧的设计，不会遮挡太多图片内容

这个新设计在保持功能性的同时，提供了更好的用户体验和视觉效果。

---

