用css实现一个类似于elementUI中Loading组件有缺口的加载圆环

直接上代码:

HTML部分

html 复制代码
<div id="app">
  <div class="loaderContainer">
    <div class="loaderContainer__icon"></div>
    <p class="loaderContainer__text">加载中...</p>
  </div>
</div>

CSS部分

css 复制代码
html,
body,
#app {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.loaderContainer {
  display: flex;
  flex-direction: column;
  align-items: center;

  .loaderContainer__icon {
    width: 42px;
    height: 42px;
    color: #0057ff;
    border-radius: 50%;
    border: 3px solid #0057ff;
    border-top-color: #ffffff;
    animation: spin 1s infinite linear;
    background-color: transparent;
  }

  .loaderContainer__text {
    margin-top: 10px;
    font-size: 14px;
    color: #0057ff;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

核心思想

1,使用一个div,设置宽高相等、再设置border-radius为50%,形成一个圆;

2,通过border给圆的边框设置宽度和颜色,并通过border-top-color设置和当前背景色一致,实现有缺口的视觉效果。

3,将圆的background-color设置为transparent透明,形成一个空心的圆环。

4,定义spin动画,使圆环旋转,实现加载的视觉效果

相关推荐
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu1 天前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢1 天前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL1 天前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
trsoliu1 天前
Claude Code Templates
前端·人工智能
wangpq1 天前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js
KongHen1 天前
完美解决请求跨域问题
前端
前端开发爱好者1 天前
弃用 uni-app!Vue3 的原生 App 开发框架来了!
前端·javascript·vue.js
再吃一根胡萝卜1 天前
VS Code Ctrl+/ 注释失效:两套快速修复与冲突排查方案(含可复制配置)
前端
支付宝体验科技1 天前
Rokid 许德刚确认出席 SEE Conf 2025,带来《AI + AR 的实践与趋势》演讲
前端