<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>H5 文字loading动画</title> <style type="text/css"> button{ line-height: 30px; background: blue; color: #fff; border: 0; } dot{ font-family: Consolas, Monaco, monospace; height: 1em; display: inline-block; overflow: hidden; line-height: 1; text-align: left; vertical-align: -.25em; } dot::before{ content: '...\A..\A.\A'; display: block; white-space: pre; animation: loading 3s infinite step-start both; } @keyframes loading{ 33%{ transform: translateY(-2em); } 66%{ transform: translateY(-1em); } } </style> </head> <body> <button type="button">正在加载中<dot></dot></button> </body> </html>
效果图: