jquery 箭头闪烁

/* 定义箭头闪烁的CSS动画 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.arrow {
  animation: blink 1s linear infinite;
}

// 使用jQuery控制箭头的显示和隐藏
function blinkArrow() {
  $('.arrow').fadeOut(500, function() {
    $(this).fadeIn(500, blinkArrow);
  });
}

// 启动闪烁效果
blinkArrow();

<!-- 使用静态加载指示器 -->
<div class="loading-indicator">加载中...</div>

/* 定义加载指示器的样式 */
.loading-indicator {
  display: none;
  font-size: 16px;
  color: #333;
}

.loading {
  display: block;
}

// 在数据加载时显示加载指示器
function loadData() {
  $('.loading-indicator').addClass('loading');
  // 模拟数据加载
  setTimeout(function() {
    $('.loading-indicator').removeClass('loading');
    // 数据加载完成后的处理
  }, 2000);
}