1 개요[ | ]
- CSS striped progres
2 예시 1[ | ]
html
Copy
<style>
.prog {
width: 200px;
display: flex;
flex-direction: column;
text-align: center;
color: #fff;
transition: width 1s ease;
background-image: linear-gradient(45deg,#fff2 25%,#fff0 25%,#fff0 50%,#fff2 50%,#fff2 75%,#fff0 75%,#fff0);
background-size: 1rem 1rem;
border-radius: 5px;
}
.prog1 {
background-color: #c70;
animation: stripes-left 1s linear infinite;
}
.prog2 {
background-color: #07c;
animation: stripes-right 1s linear infinite;
}
@keyframes stripes-left { to { background-position: 0 31px; } }
@keyframes stripes-right { to { background-position: 31px 0; } }
</style>
<span class="prog prog1">대기중입니다</span>
<br>
<span class="prog prog2">진행중입니다</span>
3 예시 2[ | ]
html
Copy
<style>
.progress {
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
border-radius: .25rem;
}
.progress-bar {
display: flex;
flex-direction: column;
text-align: center;
color: #fff;
transition: width 1s ease;
background-color: #07f;
background-image: linear-gradient(45deg,#fff2 25%,#fff0 25%,#fff0 50%,#fff2 50%,#fff2 75%,#fff0 75%,#fff0);
background-size: 1rem 1rem;
animation: stripes 1s linear infinite;
}
@keyframes stripes {
to { background-position: 0 31px; }
}
</style>
<div class="progress">
<div class="progress-bar" style="width: 70%">진행중입니다</div>
</div>
4 예시 3[ | ]
html
Copy
<style>
.meter {
text-align: center;
position: relative;
overflow: hidden;
}
.meter>i {
position: absolute;
left: -46px;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: repeating-linear-gradient(
-55deg,
#f006 1px,
#fff6 2px,
#fff6 5px,
#00f6 6px,
#00f6 10px,
#fff6 11px,
#fff6 15px,
#f006 16px,
#f006 20px
);
animation: move 1s linear infinite;
}
@keyframes move {
to {
background-position: 46px 0;
}
}
</style>
<div class="meter">이발소<i></i></div>