Site Notice
hello, world
Difference between revisions of "Progress"
From Project-EPB Commons
([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
| Line 13: | Line 13: | ||
border: 1px solid #c5c5c5; | border: 1px solid #c5c5c5; | ||
border-radius: 2px; | border-radius: 2px; | ||
| + | background: white; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| Line 20: | Line 21: | ||
background: #a3a2a2; | background: #a3a2a2; | ||
animation: progress 2s linear infinite; | animation: progress 2s linear infinite; | ||
| + | } | ||
| + | .progress.done { | ||
| + | background: green; | ||
| + | transition: all 0.3s; | ||
} | } | ||
.progress.done .bar { | .progress.done .bar { | ||
animation: none; | animation: none; | ||
transition: width .3s; | transition: width .3s; | ||
| − | width: | + | width: 0%; |
margin: auto 0; | margin: auto 0; | ||
background: green; | background: green; | ||
Revision as of 19:49, 21 November 2019
<html> <button onclick="$('.progress').addClass('done')">完成</button> <button onclick="$('.progress').removeClass('done')">重置</button> <div class="progress" style="width:80%; margin: auto 10%">
<div class="bar"></div>
</div>
<script>
</script> <style> .progress {
height: 1em; border: 1px solid #c5c5c5; border-radius: 2px; background: white; overflow: hidden;
} .progress .bar {
height: 100%; width: auto; background: #a3a2a2; animation: progress 2s linear infinite;
} .progress.done {
background: green; transition: all 0.3s;
} .progress.done .bar {
animation: none; transition: width .3s; width: 0%; margin: auto 0; background: green;
} @keyframes progress {
from {
margin-left: -40%;
margin-right: 110%;
}
to {
margin-left: 110%;
margin-right: -40%;
}
} </style>
</html>
