时间戳

首页 > 解决方案 > 如何创建具有线性渐变的动画圆形进度条？

html - 如何创建具有线性渐变的动画圆形进度条？

问题描述

我想只使用 CSS 创建这样的东西。

带渐变的圆形进度条

更具体地说，我需要一个带有 x% 黄色背景和圆边的 div。这个黄色部分可以在开头、结尾或中间的任何位置，如上图。div 的其余部分应为黑色。

我知道我可以通过在另一个 div 中放置一个 div 并设置内部 div 的长度、位置和背景颜色来做到这一点。但我想知道是否可以通过设置其背景颜色或背景图像或其他东西来仅使用一个 div 来完成。使用线性渐变，除了黄色部分的圆形边缘外，我能够实现我想要的所有效果。这是CSS：

/* this will make the background-color 40% black, 20% yellow, 40% black */
div{
    background-image: linear-gradient(
        90deg,
        black 40%,
        yellow 20%,
        yellow 60,
        black 60%
    );
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

这是代码片段：

#mydiv{
  width: 400px;
  height: 50px;
  background-image: linear-gradient(
        90deg,
        rgb(20, 20, 20) 40%,
        rgb(255, 174, 0) 20%,
        rgb(255, 174, 0) 60%,
        rgb(20, 20, 20) 60%
   );
   background-size: 100% 100%;
   background-repeat: no-repeat;
   border-radius: 25px;
}
<div id="mydiv"></div>

是否可以仅使用一个 div 和 CSS 来实现这一目标？

我需要能够控制黄色部分的长度和位置，以便我可以在 CSS 动画中更改它的位置和长度。

动画将如下所示：

#outer{
  width: 400px;
  height: 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background-color: rgb(20, 20, 20);
}

#inner{
  width: 20%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  left: -20%;
  background-color: rgb(255, 174, 0);
  animation: loading 2s infinite;
}

@keyframes loading{
  0%{
    left: -20%;
  }
  100%{
    left: 100%;
  }
}
<div id="outer">
  <div id="inner"></div>
</div>

标签： htmlcsscss-animationsbackground-imagelinear-gradients

解决方案

要做到这一点，需要将yellow栏作为一个独立的选择器。

并且使用css，您可以在标签:before内使用选择器#mydiv并将黄色条放置如下。

#mydiv {
  width: 400px;
  height: 50px;
  background-color: black;
  border-radius: 25px;
  position: relative;
}

#mydiv:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 20%;
  width: 40%;
  height: 100%;
  border-radius: 25px;
  background-color: yellow;
}
<div id="mydiv"></div>

推荐阅读