css 实现 loading 省略号效果

使用 css 实现 loading 省略号效果，如下所示。

示例代码：

<span class="loading">等待中</span>

<style>
    .loading {
      color: red;
    }
    .loading:after {
      overflow: hidden;
      display: inline-block;
      /* vertical-align: bottom; */
      animation: ellipsis 1.5s infinite;
      content: "\2026"; /* ascii code for the ellipsis character */
      /* \2026 == ... */ 
      /* content: "..." */
    }
    @keyframes ellipsis {
      from {
        width: 2px;
      }
      to {
        width: 15px;
      }
    }
</style>

主要就是利用 css 动画实现 loading 效果，配合 overflow: hidden 属性实现。

这篇张鑫旭的博文也有相关介绍

参考文章：https://blog.csdn.net/u014034575/article/details/46544969

css 实现 loading 省略号效果

原文：https://www.cnblogs.com/aurora-ql/p/13503964.html