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">
-   <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 {
-    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>