更新

assets/css/joe.global.min.scss

@@ -2214,6 +2214,42 @@
 				}
 			}
 		}
+		&-progress {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			.strip {
+				height: 12px;
+				border-radius: 6px;
+				overflow: hidden;
+				background: var(--classC);;
+				min-width: 0;
+				flex: 1;
+				margin-right: 10px;
+				.percent {
+					position: relative;
+					display: block;
+					height: 100%;
+					border-radius: 6px;
+					transition: width 0.35s;
+					&::before{
+						content: "";
+						opacity: 0;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						background: #fff;
+						border-radius: 6px;
+						animation: progress-active 3s ease-in-out infinite;
+					}
+				}
+			}
+			.percentage {
+				color: var(--minor);
+			}
+		}
 
 		/* 以下未测试 */
 		&-protected {
@@ -3362,3 +3398,13 @@
 		clip-path: circle(100%);
 	}
 }
+@keyframes progress-active {
+    0% {
+        opacity: .3;
+        width: 0
+    }
+    to {
+        opacity: 0;
+        width: 100%
+    }
+}

assets/js/joe.short.js

@@ -179,11 +179,28 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	}
 	window.customElements.define('joe-message', JoeMessage);
+	class JoeProgress extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%',
+				color: this.getAttribute('color') || '#ff6c6c'
+			};
+			this.innerHTML = `
+				<span class="joe_detail__article-progress">
+					<span class="strip">
+						<span class="percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></span>
+					</span>
+					<span class="percentage">${this.options.percentage}</span>
+				</span>
+			`;
+		}
+	}
+	window.customElements.define('joe-progress', JoeProgress);
 
 	const article = document.querySelector('.joe_detail__article');
 	if (article) article.innerHTML = article.innerHTML.replace(/<p><\/p>/g, '');
 
-
 	/* 
 	------------------------以下未测试------------------------------------------
 	*/