css实现加载中动画 |css id 样式设置

下面是一个简单的CSS加载中动画示例：

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

这个动画是一个旋转的圆形，由一个边框颜色为灰色的圆圈和一个边框颜色为蓝色的小圆圈组成。通过CSS的属性transition，大家可以实现一个渐变过渡效果，让用户在等待的时候不会感到突兀。

在HTML代码中，你可以使用以下代码来插入动画：

这个例子仅仅是一个简单的开始，你可以在这个基础上去扩展自己的动画，比如加入文字描述、更改动画的颜色、变换动画样式、实现自定义的SVG图标等等。

最后，大家的目标是尽可能的让用户感到宾至如归。所以加入合适的动画效果将会带给用户愉悦的体验，同时也可以提升你的网页设计品质。