Site Notice

hello, world

Difference between revisions of "Progress"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
([InPageEdit] 没有编辑摘要)
Line 15: Line 15:
 
     border: 1px solid #c5c5c5;
 
     border: 1px solid #c5c5c5;
 
     padding: 2px;
 
     padding: 2px;
 +
    overflow: hidden;
 
   }
 
   }
  
Line 20: Line 21:
 
     height: 100%;
 
     height: 100%;
 
     background: #a3a2a2;
 
     background: #a3a2a2;
 +
    animation: progress 3s ease infinite;
 
   }
 
   }
  
 
   .progress.done .bar {
 
   .progress.done .bar {
 +
    animation: none;
 
     width: 100%;
 
     width: 100%;
 
     margin: auto 0;
 
     margin: auto 0;
 
     background: green;
 
     background: green;
 
   }
 
   }
 +
 +
@keyframes progress {
 +
  from {
 +
    margin-left: -30%;
 +
    margin-right: 100%;
 +
  }
 +
  to {
 +
    margin-left: 100%;
 +
    margin-right: -30%;
 +
  }
 +
}
 
</style>
 
</style>
  
 
</html>
 
</html>

Revision as of 19:38, 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;
   overflow: hidden;
 }
 .progress .bar {
   height: 100%;
   background: #a3a2a2;
   animation: progress 3s ease 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>