css3 - CSS3s实现loading效果？
这种的loading效果怎么实现，如下图：
希望能够实现上图中loading的效果
共有5个答案
看下用css实现的效果: https://codesandbox.io/p/sandbox/naughty-haze-x2r43w
<div class="loader"></div>
.loader { width: 50px; padding: 8px; aspect-ratio: 1; border-radius: 50%; background: #4277DF; --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; -webkit-mask: var(--_m); mask: var(--_m); -webkit-mask-composite: source-out; mask-composite: subtract; animation: loading 1s infinite linear;}@keyframes loading {to{transform: rotate(1turn)}}
图的话随意，用svg还是png都行，就看能提供什么样的素材。当然完全仅靠CSS也可以实现。
然后就是使用 animation 属性和 @keyframes 去制作元素旋转动画了。
除了Meahill的提供的集合站，我这里有一个Loading效果的集合 CSS Loaders
可以参考以下
.spinner { width: 100px; height: 100px; background-image: url(./svg/spinner.svg); } .spinner .path { animation: loading-dash 1.5s ease-in-out infinite; stroke-dasharray: 90,150; stroke-dashoffset: 0; stroke-width: 2; stroke: #409eff; stroke-linecap: round; } .spinner .circular { animation: loading-rotate 2s linear infinite; } @keyframes loading-dash { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0 } 50% { stroke-dasharray: 90,150; stroke-dashoffset: -40px } to { stroke-dasharray: 90,150; stroke-dashoffset: -120px } } @keyframes loading-rotate { to { transform: rotate(360deg) } }<svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg><div class="spinner"> <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg> </div>
方案很多，一般来说 SVG 画最好。
不过我更推荐 spinkit 这个库，很多纯 CSS 的 loading spinner，可以按需选用。
-
本文向大家介绍Javascript+CSS3实现进度条效果，包括了Javascript+CSS3实现进度条效果的使用技巧和注意事项，需要的朋友参考一下 进度条在很多web中都能用的到，本文就是介绍了进度条效果，具体代码如下： 一：css2 属性clip实现网页进度条； 在实现之前，我们先来介绍一下clip属性，因为这个属性在css2.1中很少使用到，所以我们有必要来了解一下； 浏览器支持程度：所有
-
本文向大家介绍使用css实现一个loading的效果相关面试题，主要包含被问及使用css实现一个loading的效果时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍js css3实现图片拖拽效果，包括了js css3实现图片拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
这种css效果咋实现。
-
本文向大家介绍基于javascript实现页面加载loading效果，包括了基于javascript实现页面加载loading效果的使用技巧和注意事项，需要的朋友参考一下 本文实为大家分享了javascript实现页面加载loading效果，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
-
本文向大家介绍用css3实现文字发光的效果相关面试题，主要包含被问及用css3实现文字发光的效果时的应答技巧和注意事项，需要的朋友参考一下 text-shadow: 实现;