Site Notice

hello, world

Difference between revisions of "Progress"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
([InPageEdit] 没有编辑摘要)
Line 19: Line 19:
 
   .progress .bar {
 
   .progress .bar {
 
     height: 100%;
 
     height: 100%;
    width: 0%;
 
 
     background: #a3a2a2;
 
     background: #a3a2a2;
    transition: width 3s ease-in-out;
 
 
   }
 
   }
  

Revision as of 19:33, 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%;
   background: #a3a2a2;
 }
 .progress.done .bar {
   width: 100%;
   margin: auto 0;
   background: green;
 }

</style>

</html>