CSS实现一个简易的加载进度条

第一个效果图：

代码：

#loading-center {
    background: red none repeat scroll 0 0;
    background-image: linear-gradient(108deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 66%, transparent 0);
    width: 500px;
    height: 65px;
    line-height:65px;
    text-align:center;
    border-radius: 5px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    animation: nc 2.5s linear infinite;
    background-size: 45px 65px;

    color:#ffffff;
}
@keyframes nc {
    to {
        background-position: -100px 0
    }
}

<div id="loading-center">加载中</div>

第二个效果图：

body {
  margin: 0;
  padding: 0;
  background: #334aff;
}

.circle {
  /* 双居中(垂直+水平) */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* 绘制圆形 */
  /* 
    这个绘制圆形的方法在Bilibili/008中也出现过，我觉得可以作为一个小代码片段(code-snippet)
    以下为我在vscode当中自定义的小代码片段
    "draw-circle": {
        "scope": "css",
        "prefix": "draw-circle",
        "body": [
        "width: $1px;",
        "height: $2px;",
        "border-radius: 50%;",
        "border: $3px solid $4);",
    ]
  }
    */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.1);

  border-top: 10px solid #fff;
  animation: animate 1.5s infinite linear;
}

@keyframes animate {
  /* 这里要记得加translate(-50%, -50%)，否则不会居中 */
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

  <body>
    <div class="circle"></div>
  </body>

第三个效果图：

:root{
    --ringWidth:40px;
    --totalWidth:200px;
}
.diamond {
    width: var(--totalWidth);
    height: var(--totalWidth);
    background-color: transparent;
    border: var(--ringWidth) solid rgb(255, 0, 0,0.1);
    box-sizing: border-box;
    border-radius: 50%;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.diamond::after {
    content: "";
    width: calc(100% + var(--ringWidth) * 2 );
    height: calc(100% + var(--ringWidth) * 2 );
    background-color: transparent;
    position: absolute;
    left: calc(var(--ringWidth) * -1 );
    top: calc(var(--ringWidth) * -1 );
    box-sizing: border-box;
    border-radius: 50%;
    border: var(--ringWidth) solid #ffd800;
    clip-path: polygon(45% 0, 55% 0%, 50% 50%);
    animation:anim 5s linear infinite;
}
@keyframes anim {
    from {
        transform-origin: center;
        transform: rotate(0deg);
    }

    to {
        transform-origin: center;
        transform: rotate(360deg);
    }
}

 <div class="diamond">加载中...</div>

如果要求不高的，改改颜色之类的可以直接拿去使用

posted on 2025-08-19 08:43 华安阅读(14) 评论(0) 收藏举报

刷新页面返回顶部

huaan011

CSS实现一个简易的加载进度条

导航

公告