편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
2번째 줄: | 2번째 줄: | ||
;CSS striped progres | ;CSS striped progres | ||
<source lang='html'> | |||
< | |||
<style> | <style> | ||
.progress { | .progress { | ||
48번째 줄: | 16번째 줄: | ||
color: #fff; | color: #fff; | ||
transition: width 1s ease; | transition: width 1s ease; | ||
background-color: # | background-color: #007bff; | ||
background-image: linear-gradient(45deg, | background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); | ||
background-size: 1rem 1rem; | background-size: 1rem 1rem; | ||
animation: stripes 1s linear infinite; | animation: progress-bar-stripes 1s linear infinite; | ||
} | } | ||
@keyframes stripes { | @keyframes progress-bar-stripes { | ||
to { background-position: 0 31px; } | to { background-position: 0 31px; } | ||
} | } | ||
60번째 줄: | 28번째 줄: | ||
<div class="progress-bar" style="width: 70%">진행중입니다</div> | <div class="progress-bar" style="width: 70%">진행중입니다</div> | ||
</div> | </div> | ||
</ | </source> | ||
<jsfiddle>04gh37ym</jsfiddle> | |||
<source lang='html'> | |||
< | |||
<style> | <style> | ||
.meter { | .meter { | ||
98번째 줄: | 66번째 줄: | ||
</style> | </style> | ||
<div class="meter">이발소<i></i></div> | <div class="meter">이발소<i></i></div> | ||
</ | </source> | ||
<jsfiddle>s41mkftn</jsfiddle> | |||
==참고== | ==참고== |