Difference between revisions of "Progress"

Revision as of 11:09, 23 November 2019

 <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="ipe-progress" style="width:80%; margin: auto 10%">
-   <div class="bar"></div>
+   <div class="progress-bar"></div>
 </div>
@@ Line 9: / Line 9: @@
 </script>
 <style>
-.progress {
-  height: 1em;
-  border: 1px solid #c5c5c5;
-  border-radius: 2px;
-  background: white;
-  overflow: hidden;
-}
-.progress .bar {
-  height: 100%;
-  width: auto;
-  background: #979797;
-  animation: progress 2s linear infinite;
-}
-.progress.done {
-  background: #5cc803;
-  transition: all 1.5s;
-}
-.progress.done .bar {
-  animation: none;
-  transition: width .3s;
-  width: 0%;
-  margin: auto 0;
-  opacity: 0;
-  transition: all 0.8s;
-}
-@keyframes progress {
-  from {
-    margin-left: -40%;
-    margin-right: 110%;
-  }
-  to {
-    margin-left: 110%;
-    margin-right: -40%;
-  }
-}
 </style>
 </html>