下面是一个简单的CSS条形等待层示例：
“`html
<div class=”bar”>
<div class=”bar-inner”></div>
<div class=”bar-end”></div>
</div>
“`css
.bar {
position: relative;
width: 100px;
height: 200px;
.bar-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
.bar-end {
position: absolute;
bottom: 0;
left: 50%;
width: 50%;
height: 100px;
background-color: #fff;
transform: translateY(-50%);
.bar-inner:nth-child(1) {
background-color: #007bff;
.bar-inner:nth-child(2) {
background-color: #0067b3;
.bar-inner:nth-child(3) {
background-color: #0054a9;
.bar-inner:nth-child(4) {
background-color: #00418d;
.bar-inner:nth-child(5) {
background-color: #00347e;
.bar-end:nth-child(1) {
bottom: 100px;
.bar-end:nth-child(2) {
bottom: 50px;
.bar-end:nth-child(3) {
bottom: 0;
.bar-end:nth-child(4) {
bottom: 50px;
.bar-end:nth-child(5) {
bottom: 0;
条形效果的核心是`.bar`元素，它是一个`flex`容器，其中包含5个内部元素，每个内部元素都包含一个背景色，以及一个矩形边框。
CSS条形等待层还可以通过添加过渡效果来使效果更加流畅和自然。过渡效果可以通过在`.bar-inner`和`.bar-end`元素上添加`transition`属性来实现。
通过使用CSS条形等待层技术，大家可以创建出各种不同类型的动态条形效果，例如圆形、椭圆形、随机颜色等。该技术的简单性和灵活性使其成为设计和开发网站时经常使用的CSS技术之一。