Difference between revisions of "Progress"

Latest revision as of 11:12, 23 November 2019

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

</script> <style>

</style>

</html>

@@ Line 1: / Line 1: @@
 <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>
@@ Line 9: / Line 30: @@
 </script>
 <style>
-.progress {
-  height: 1em;
-  border: 1px solid #c5c5c5;
-  border-radius: 2px;
-  overflow: hidden;
-}
-.progress .bar {
-  height: 100%;
-  background: #a3a2a2;
-  animation: progress 2s linear infinite;
-}
-.progress.done .bar {
-  animation: none;
-  transition: width .3s;
-  width: 100%;
-  margin: auto 0;
-  background: green;
-}
-@keyframes progress {
-  from {
-    margin-left: -40%;
-    margin-right: 110%;
-  }
-  to {
-    margin-left: 110%;
-    margin-right: -40%;
-  }
-}
 </style>
 </html>