效果如示:
<div class="progress">
<div
class="progress-bar progress-bar-success progress-bar-striped"
:style="border-radius: 10px;width:' + progress"
:class="total == queryTotal ? " : 'active'"
></div>
<span
class="progress label"
:class=" zero: progress == 0%, hundred: progress == 100%']"
>fl progress ]</span
</div>
</div>
<style>
.progress-div {
width: 100%;
}
.progress {
position: relative;
height: 20px;
background-color: #f5f5f5;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #28a745;
transition: width 0.3s ease-in-out;
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.progress.active .progress-bar {
animation: progress-bar-stripes 1s linear infinite;
}
.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
}
.zero {
color: #dc3545;
}
.hundred {
color: #28a745;
}
@keyframes progress-bar-stripes {
from { background-position: 1rem 0; }
to { background-position: 0 0; }
}
</style>
<div class="progress-div">
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped"
:style="'width:' + progress">
</div>
<span class="progress-label"
:class="{ 'zero': progress === 0, 'hundred': progress === 100 }">
fl progress
</span>
</div>
</div>