Site Notice
hello, world
Difference between revisions of "Progress"
From Project-EPB Commons
([InPageEdit] 没有编辑摘要) |
|||
| Line 9: | Line 9: | ||
</script> | </script> | ||
<style> | <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 { | @keyframes progress { | ||
from { | from { | ||
Revision as of 19:45, 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; 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>
