Site Notice
hello, world
Difference between revisions of "Progress"
From Project-EPB Commons
([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <button onclick=" | + | <button onclick="$('.progress').addClass('done')">开始</button> <button onclick="$('.progress').removeClass('done')">重置</button> |
<div class="progress"> | <div class="progress"> | ||
<div class="bar"></div> | <div class="bar"></div> | ||
| Line 21: | Line 21: | ||
width: 0%; | width: 0%; | ||
background: #a3a2a2; | background: #a3a2a2; | ||
| + | transition: width 3s ease-in-out; | ||
} | } | ||
| − | .progress .bar | + | .progress.done bar { |
width: 100%; | width: 100%; | ||
| − | |||
} | } | ||
</style> | </style> | ||
</html> | </html> | ||
Revision as of 19:31, 21 November 2019
<html> <button onclick="$('.progress').addClass('done')">开始</button> <button onclick="$('.progress').removeClass('done')">重置</button> <div class="progress">
<div class="bar"></div>
</div>
<script>
</script> <style>
.progress {
width: 80%;
margin: auto 10%;
height: 1em;
border: 1px solid #c5c5c5;
padding: 2px;
}
.progress .bar {
height: 100%;
width: 0%;
background: #a3a2a2;
transition: width 3s ease-in-out;
}
.progress.done bar {
width: 100%;
}
</style>
</html>
