交易仪表板：初始闪烁两次后保持静态的更新文本及200ms加载器实现求助

我来帮你搞定这两个需求！下面是针对你交易仪表板需求的具体实现方案：

一、让「最后更新」文本初始闪烁两次后保持静态 #

你现有的动画代码只执行了一次，且没有保留最终的显示状态。我们可以通过调整CSS动画参数，精准实现“初始闪烁两次后静态显示”的效果：

修改后的CSS代码 #

.BlinkingUpdate {
  margin-bottom: 0;
  color: #000;
  font-size: 18px;
  margin-top: 5px;
  text-align: left;
  margin-right: 15px;
  /* 动画配置：名称 单次闪烁时长 执行次数 保持最终状态 */
  animation: blinker 0.8s 2 forwards;
}

@keyframes blinker {
  50% { opacity: 0; }
}

关键说明 #

• 0.8s：单次闪烁的完整时长（从显示→隐藏→显示），你可以根据视觉感受微调这个数值
• 2：动画严格执行2次，刚好对应“闪烁两次”的需求
• forwards：动画结束后强制保持最后一帧的状态（即opacity:1，文本静态显示）

HTML部分保持你现有代码即可：

<p class="BlinkingUpdate">Last refresh happened sunday</p>

二、实现200ms时长的加载器 #

这里提供一个轻量的CSS加载器，完美匹配你需要的200ms旋转时长：

CSS加载器代码 #

/* 加载器容器 */
.dashboard-loader {
  width: 24px;
  height: 24px;
  border: 2px solid #e0e0e0;
  border-top: 2px solid #2563eb; /* 可替换为你的主题色 */
  border-radius: 50%;
  /* 动画配置：名称 200ms时长 匀速循环 */
  animation: loader-spin 0.2s linear infinite;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML使用示例 #

<!-- 加载器元素，可放在需要显示加载状态的位置 -->
<div class="dashboard-loader"></div>

补充说明 #

• 0.2s：刚好对应你需要的200ms旋转一圈的时长
• linear：让旋转速度保持均匀，避免快慢变化
• infinite：加载过程中持续旋转，你可以通过JavaScript在数据加载完成后隐藏这个元素（比如添加display: none）

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