<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { margin: 200px; } .load-indicator { font-size: 16px; color: black; } .span { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: -.25em; } .span::after { display: block; white-space: pre-wrap; content: "...\A..\A."; animation: loading 3s infinite step-start both; } @keyframes loading { 33% { transform: translate3d(0, -2em, 0); } 66% { transform: translate3d(0, -1em, 0); } } </style> </head> <body> <div class="box"> <div class="load-indicator">加载中<span class="span"></span></div> </div> </body> </html>
相关文章：