Site Notice

hello, world

Difference between revisions of "Progress"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
m ([InPageEdit] 没有编辑摘要)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<button onclick="$('.progress').addClass('done')">完成</button> <button onclick="$('.progress').removeClass('done')">重置</button>
+
<button onclick="$('.ipe-progress').toggleClass('done')">切换</button>
−
<div class="progress" style="width:80%; margin: auto 10%">
+
 
−
   <div class="bar"></div>
+
<div class="ipe-progress" style="width:100%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:80%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:60%;">
 +
   <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:40%;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:200px;">
 +
  <div class="progress-bar"></div>
 +
</div>
 +
 
 +
<div class="ipe-progress" style="width:50px;">
 +
  <div class="progress-bar"></div>
 
</div>
 
</div>
  
Line 9: Line 30:
 
</script>
 
</script>
 
<style>
 
<style>
−
.progress {
+
 
−
  height: 1em;
 
−
  border: 1px solid #c5c5c5;
 
−
  border-radius: 2px;
 
−
  background: white;
 
−
  overflow: hidden;
 
−
}
 
−
.progress .bar {
 
−
  height: 100%;
 
−
  width: auto;
 
−
  background: #a3a2a2;
 
−
  animation: progress 2s linear infinite;
 
−
}
 
−
.progress.done {
 
−
  background: green;
 
−
  transition: all 0.5s;
 
−
}
 
−
.progress.done .bar {
 
−
  animation: none;
 
−
  transition: width .3s;
 
−
  width: 0%;
 
−
  margin: auto 0;
 
−
  opacity: 0;
 
−
  transition: all 0.5s;
 
−
}
 
−
@keyframes progress {
 
−
  from {
 
−
    margin-left: -40%;
 
−
    margin-right: 110%;
 
−
  }
 
−
  to {
 
−
    margin-left: 110%;
 
−
    margin-right: -40%;
 
−
  }
 
−
}
 
 
</style>
 
</style>
  
 
</html>
 
</html>

Latest revision as of 11:12, 23 November 2019

<html> <button onclick="$('.ipe-progress').toggleClass('done')">切换</button>

<div class="ipe-progress" style="width:100%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:80%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:60%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:40%;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:200px;"> 

 <div class="progress-bar"></div>

</div>

<div class="ipe-progress" style="width:50px;"> 

 <div class="progress-bar"></div>

</div>

<script>

</script> <style>

</style>

</html>

Retrieved from "https://common.epb.wiki/index.php?title=Progress&oldid=1230"