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