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

妍思码匠

于 2025-01-23 10:33:45 发布

阅读量667

点赞数 3

CC 4.0 BY-SA版权

分类专栏：妍思码匠的前端乐园文章标签： css elementui 前端 css实现loading圆环

本文链接：https://blog.csdn.net/wjs0406/article/details/145319084

直接上代码：

HTML部分

<div id="app">
  <div class="loaderContainer">
    <div class="loaderContainer__icon"></div>
    <p class="loaderContainer__text">加载中...</p>
  </div>
</div>

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: