首页帮我用HTML制作圆形进度条加载动画

帮我用HTML制作圆形进度条加载动画

时间: 2023-10-09 08:09:02 浏览: 98

当然可以！下面是一个使用HTML和CSS制作圆形进度条加载动画的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .circle { width: 100px; height: 100px; border-radius: 50%; background-color: #e6e6e6; position: relative; } .fill { width: 100%; height: 100%; border-radius: 50%; background-color: #4CAF50; position: absolute; top: 0; left: 0; transform-origin: center center; animation: fillAnimation 5s linear infinite; } @keyframes fillAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="circle"> <div class="fill"></div> </div> </body> </html> ``` 你可以将上面的代码复制到一个HTML文件中，然后在浏览器中打开该文件，就能看到一个圆形进度条加载动画了。你可以根据需要调整进度条的颜色、大小和动画时长。希望这个代码能满足你的需求！如果有任何问题，请随时提问。

阅读全文