版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34223398/article/details/84286645
利用keyframes动画实现，
.er-button-loading .er-button-style:before { content: "\f110"; font-family: "FontAwesome"; display: inline-block; z-index: 2; background: inherit; font-size: 1.4em; padding: inherit; -webkit-animation: loading 1s step-start; -webkit-animation-iteration-count: infinite;///播放动画次数，infinite表示循环播放 } @keyframes loading { 0%{ transform: rotate(0deg); transform-origin: center;///旋转的基点位置，center表示从中间开始旋转 } 11%{ transform: rotate(40deg); transform-origin: center; } 22%{ transform: rotate(80deg); transform-origin: center; } 33%{ transform: rotate(120deg); transform-origin: center; } 44%{ transform: rotate(160deg); transform-origin: center; } 55%{ transform: rotate(200deg); transform-origin: center; } 66%{ transform: rotate(240deg); transform-origin: center; } 77%{ transform: rotate(280deg); transform-origin: center; } 88%{ transform: rotate(320deg); transform-origin: center; } 100%{ transform: rotate(360deg); transform-origin: center; } } @-webkit-keyframes loading { 0%{ -webkit-transform: rotate(0deg); -webkit-transform-origin: center; } 11%{ -webkit-transform: rotate(40deg); -webkit-transform-origin: center; } 22%{ -webkit-transform: rotate(80deg); -webkit-transform-origin: center; } 33%{ -webkit-transform: rotate(120deg); -webkit-transform-origin: center; } 44%{ -webkit-transform: rotate(160deg); -webkit-transform-origin: center; } 55%{ -webkit-transform: rotate(200deg); -webkit-transform-origin: center; } 66%{ -webkit-transform: rotate(240deg); -webkit-transform-origin: center; } 77%{ -webkit-transform: rotate(280deg); -webkit-transform-origin: center; } 88%{ -webkit-transform: rotate(320deg); -webkit-transform-origin: center; } 100%{ -webkit-transform: rotate(360deg); -webkit-transform-origin: center; } } 文章来源: css实现动态正在加载图标