1. 正在加载中...

<style>
dot {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -.25em;/*用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式*/
  overflow: hidden;
}

dot::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}

@keyframes dot {
  33% {
    transform: translateY(-2em);/*在页面垂直移动元素*/
  }
  66% {
    transform: translateY(-1em);
  }
}
</style>

<div>正在加载中 <dot>...</dot></div>

2. 三道杠图标和双层圆点图标

<style>
.icon-menu {
  display: inline-block;
  width: 140px;
  height: 10px;
  padding: 35px 0;
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
  background-clip: content-box;/*content-box: 背景颜色只覆盖到内容区域 padding-box: content + padding border-box: content + padding + border */
}
.icon-dot {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}
</style>