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

原理

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

显示效果如

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

.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; }

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;
}