等宽字体的妙用-loading 点点点动画

原理

ch等宽字体 + text-indent 动画负缩进

显示效果如

loading .
loading ..
loading ...
loading .
loading ..
loading ...

loading...

代码

<div class="demo">
  loading
  <dot>...</dot>
</div>

.demo {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
}
@keyframes dot {
  33% { text-indent: 0; }
  66% { text-indent: -2ch; }
}
dot {
  display: inline-block; 
  width: 3ch;
  text-indent: -1ch;
  vertical-align: bottom; 
  overflow: hidden;
  animation: dot 3s infinite step-start both;
  font-family: Consolas, Monaco, monospace;
}