1 效果
2 实现原理
原理很简单：
1 设置100px宽高的div，再设置成圆形border-radius：50%；
2 设置border一定宽度和颜色，再设置border-left为同样宽度和另一种颜色；
3 设置animation动画，让div旋转起来就可以；通过from和to设置旋转角度即可
3全部代码:
<!DOCTYPE html><html><head><title>css实现加载中loading动画效果</title><style type="text/css">html,body {width: 100%;height: 100%;margin: 0;padding: 0;display: flex;flex-flow: column;align-items: center;justify-content: center;}.loading {width: 100px;height: 100px;border-radius: 50%;border: 15px solid #BEBEBE;border-left: 15px solid orange;animation: loading 1s linear infinite;}@keyframes loading {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style></head><body><div class="loading"></div></body></html>
