css实现省略号loading效果

CSS实现省略号loading效果，可以在语句未完全加载时展示省略号，等加载完成后再将省略号替换成完整的语句，达到更好的用户体验。

.loading{
  width: 100%;
  text-overflow: ellipsis; //设定省略号
  white-space: Nowrap; //防止文本换行
  overflow: hidden;//隐藏溢出文本
}
.loading::after{
  content: '';
  display: inline-block;
  width: 10px; //省略号宽度
  height: 1em; //文本高度
  margin-left: 5px; //省略号和文本距离
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
   transform: translateX(-20px);
   opacity: 0;
  }
  50% {
   opacity: 1;
  }
  100% {
   transform: translateX(250px);
   opacity: 0;
  }
}

上面的代码中，我们首先设定了loading类的文本溢出部分省略号，然后在其后面添加了一个伪元素，用于展示加载效果，并对其进行动画处理，让其在文本的后面循环滚动。