文本打点loading动画

最佳实现

正在加载中...

代码

CSS代码：
dot-a {
    display: inline-block;
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25ex;
    overflow: hidden;
}
dot-a::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot1 3s infinite step-start both;
}
@keyframes dot1 {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}
HTML代码：
正在加载中<dot-a>...</dot-a>

其它实现

1. content动画实现

正在加载中

优点：

  • 易理解易上手；
  • 颜色、字号天然自适应；

缺点：

  • IE不兼容，Safari不兼容；
CSS代码：
dot-b::before {
    content: '...';
    position: absolute;
    animation: dot2 3s infinite step-start both;
}
dot-b:after {
    content: '...';
    color: transparent;
}
@keyframes dot2 {
    33% { content: '.'; }
    66% { content: '..'; }
}
HTML代码：
正在加载中<dot-b></dot-b>

2. ch尺寸控制

正在加载中...

优点：

  • 易理解易上手；
  • 颜色、字号天然自适应；

缺点：

  • IE ch支持有瑕疵；
  • 专门使用了等宽字体，样式不完美；
CSS代码：
dot-c {
    display: inline-block;
    width: 3ch;
    text-indent: -1ch;
    vertical-align: -.25ex;
    overflow: hidden;
    animation: dot3 3s infinite step-start both;
    font-family: Consolas, Monaco, monospace;
}
@keyframes dot3 {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}
HTML代码：
正在加载中<dot-c>...</dot-b>

3. box-shadow模拟

亦可以使用radial-gradient模拟。

正在加载中

优点：

  • 没有什么优点；

缺点：

  • 尺寸、间距和形状固定，适用场景有限；
CSS代码：
dot-d::before {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    background-color: currentColor;
    box-shadow: 4px 0, 8px 0;
    animation: dot4 3s infinite step-start both;
    margin-top: 1em;
}
dot-d::after {
    content: '...';
    color: transparent;
}
@keyframes dot4 {
    33% { box-shadow: none; }
    66% { box-shadow: 4px 0; }
}
HTML代码：
正在加载中<dot-d></dot-d>

4. border和background模拟

正在加载中

优点：

  • 脑洞不错；

缺点：

  • 尺寸、间距和形状固定，适用场景有限；
CSS代码：
dot-e::before {
    content: '';
    position: absolute;
    width: 10px; height: 2px;
    padding: 0 2px;
    border-left: 2px solid; border-right: 2px solid;
    background-color: currentColor;
    background-clip: content-box;
    box-sizing: border-box;
    animation: dot5 3s infinite step-start both;
    margin-top: 1em;
}
dot-e::after {
    content: '...';
    color: transparent;
}
@keyframes dot5 {
    33% { border-right-color: transparent; background-color: transparent; }
    66% { border-right-color: transparent; }
}
HTML代码：
正在加载中<dot-e></dot-e>