让我们一起制作并享用这些 CSS3 进度条吧！🍭
你现在还吃糖果吗？条纹糖？🍭 我小时候超爱吃。那我现在喜欢什么呢？我喜欢CSS。🤩
咱们开始吧。我们要把一个“甜美”的条纹糖果棒变成进度条。因为……说实话，默认的 HTML 代码<progress>太糟糕了。你看这……
我们可以把它变成一个更“甜蜜”的版本，而且不需要任何<progress>……听起来很棒吧？让我们开始吧！
先把HTML代码写完🤪
因为……嗯，你需要一些东西来装饰一下？我们想要实现的是下面这种加载/旋转的糖果棒：
如果你戴上前端眼镜仔细观察，你会发现我们需要用到两个图层或元素。首先是条形图支架元素，它上面才是真正的红色糖果棒。所以，这就是我们开始的地方：
<div>
<span></span>
</div>
这div是我们的容器，我们将在其上添加一个元素，span使其成为一个内联容器。以下是它在 Chrome 开发者工具中的显示效果：
让我们把它做成糖果的样子🍭
接下来是精彩的部分。首先，给它div添加一个类，loading-bar然后在 CSS 中，我们需要这样设置它的样式：
.loading-bar {
position: relative;
margin: 0 auto;
height: 50px;
width: 30%;
border-radius: 50px;
}
现在，relative这里的定位是可选的，因为我们没有显式地设置 `<div>` top、 `<span> ` 或left` <span>` 属性的值来定位它。我们只是通过将`<div> ` 的 `top` 和 `bottom` 属性设置为 `0` ，`left` 和 `right` 属性设置为 `0` 来将其居中于文档。设置默认值是必要的，因为如果没有这些值，我们将无法看到该 div。这些值可以根据您希望加载条的大小而定。一个漂亮的圆形也是一个不错的选择，可以使其看起来像一个加载条。bottomrightbodymargin0autowidthheightborder
现在你什么都看不到，因为默认情况下，该 div 元素和 body 元素的颜色都是白色的。尝试background-color: orangered;向该 div 元素添加内容，你就能得到基础容器了。
接下来，我们需要添加那些时髦的糖果条纹，具体步骤span如下：
span {
display: block;
position: relative;
height: 100%;
width: 100%;
border-radius: 50px;
background-image: linear-gradient(to bottom, #fac4c0, #f60000 60%);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
}
块级显示确保元素框为块级样式，且元素前后留有相等的空间。这次我们需要它占据父元素（即 div）100% 的面积，因此我们为其设置了相应的宽度、高度和边框半径值。任何超出 span 范围的元素（如果存在）都会被裁剪掉，方法是将 `width` 的值设置为overflow`0` hidden。
不过，你还是什么都看不到 :( 我们需要添加一些颜色！我们通过使用一个linear-gradient180° 角的渐变来实现这一点。鲜红色#f60000占据了总渐变值的 60%。这样一来，你就能看到我们的加载器有了渐变效果！
完全可选……
现在要增加一些层次感，让它看起来更像糖果。我们添加两个阴影值。第一个是顶部的白色阴影，第二个是底部的黑色阴影。关键是要使用阴影，inset让它看起来像是从一侧照射过来的。这类阴影绘制在其容器内。
加条纹！🌈
我们快成功了！对我来说，没有条纹的糖果看起来很糟糕。要做到这一点，我们需要了解::afterCSS 中的伪元素。根据Mozilla 开发者网络 (MDN) 的文档：
在 CSS 中，`::after`会创建一个伪元素，该伪元素是所选元素的最后一个子元素。它通常用于向具有 `content` 属性的元素添加装饰性内容。默认情况下，它是行内元素。
它对我们有什么帮助呢？嗯，我们用 ::after! 创建条纹伪元素。
span:after {
content: "";
position: absolute;
top: 0px; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
每个伪元素都必须有一个contentcontent 属性。无论 content 的值是什么，它都会用新生成的值替换原元素。例如content: "🍬";，如果你添加了 `::after`，那么之前 div 显示的内容现在将被替换为“🍬”。很棒吧？但是我们不希望新创建的 `::after` 元素内有任何内容。它会显示在 `span` 元素内，完全没用……直到我们什么都不放！这就是为什么我们直接使用' '空值的原因。
Stripe 的神奇之处就在这里！我们使用background-image属性来添加一个大渐变。让我们逐一解读：
-45deg这就是我们梯度倾斜的角度。rgba(255, 255, 255, .2) 25%：白色（RGB 格式中值为 255 表示白色），不透明度为 0.2。25% 是它在整个元素中所占的面积。transparent 25%：一种透明的颜色值，其面积占总面积的 25%。
我们主要关注三个价值观。如果您只遵循这三个价值观，不会有太大改变。现在，请仔细观察条纹图案……
我们可以看到，如果多个颜色停止点位于同一位置，它们会产生从第一个到最后一个的过渡效果。因此，最终呈现的效果是颜色在该位置突然改变，而不是平滑过渡。这一切都得益于 CSS3 中支持颜色停止点的属性，该属性在W3C 草案background-image中有所规定。
这样，在整个跨度上重复几次之后（这次不要忘记使用绝对定位），我们就得到了非常适合我们糖果的条纹图案！
默认background-size将元素宽度和高度都设置为 50%，这似乎比较合理。此外，我们需要在容器内创建这些条纹，因此我们使用 overflow 属性，并border针对所有四个方向设置父级 div 的特定属性。
让它动起来！🎬
真正的加载现在开始。我们选中新创建的 ::after 元素，创建一个animate类，然后选择它下面的 span 元素。定义动画持续1s时间，使其无限循环。
.loading-bar > span:after, .animate > span > span {
animation: load 1s infinite;
}
现在很简单了。我们想要实现的是条纹位置的动画效果。初始的div元素保持固定位置，条纹在其上方移动，表示后台正在加载内容。
@keyframes load {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
我们从零开始，宽度和高度分别设置为 50 像素。瞧！看起来真不错。🤤
以下是实现这个糖果加载器的 CodePen 代码：
那么，谁准备好吃那颗糖了？👀
接下来去哪儿？🤔
来点儿小技巧！这次我们刚做了个加载器，不如再做一个真正的糖果“进度条”？这次，条纹会在支架上移动，从左到右移动，就像在加载一样。这就是我说的：
如果你在制作过程中遇到困难，别担心，可以看看我制作的CodePen 示例。
感谢阅读，非常感谢！祝您今天过得愉快。(✿◕‿◕✿)
你试过用 Microsoft Docs 了吗？
— Microsoft Developer UK (@msdevUK) 2020年6月17日
我们不是说它会改变你的编程方式，但也不是说它不会。😉
快来看看：https://t.co/4o3bkwcdoq
图片来源：https://t.co/h1wgHdR7Uc #DevHumour #Programming pic.twitter.com/TPl6vZCc5Z