diff --git a/pages/tripartite/okBarcode.html b/pages/tripartite/okBarcode.html
index c137edc..2e7a1d5 100644
--- a/pages/tripartite/okBarcode.html
+++ b/pages/tripartite/okBarcode.html
@@ -42,7 +42,7 @@ layui.use(["okBarcode"], function () {
             let $ = layui.jquery;
 
             code({
-                elem: 'pre',
+                elem: "pre",
                 title: "代码示例"
             });
 
diff --git a/pages/tripartite/okMd5.html b/pages/tripartite/okMd5.html
index 763e530..5ab3f08 100644
--- a/pages/tripartite/okMd5.html
+++ b/pages/tripartite/okMd5.html
@@ -42,7 +42,7 @@ layui.use(["okMd5"], function () {
             let okMd5 = layui.okMd5;
 
             code({
-                elem: 'pre',
+                elem: "pre",
                 title: "代码示例"
             });
 
diff --git a/pages/tripartite/okNprogress.html b/pages/tripartite/okNprogress.html
index 7f5eaa7..e075cd7 100644
--- a/pages/tripartite/okNprogress.html
+++ b/pages/tripartite/okNprogress.html
@@ -8,17 +8,48 @@
 </head>
 <body>
     <div class="ok-body">
+        <blockquote class="layui-elem-quote">
+            <p>NProgress.js提供页面加载进度条效果，当页面打开加载时，在页面顶部会出现进度条加载动画。</p>
+            <p>NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。</p>
+        </blockquote>
+        <pre>
+layui.use(["okNprogress"], function () {
+    let okNprogress = layui.okNprogress;
+    <br/>
+    // 开始进度条
+    okNprogress.start();
+    // 结束进度条
+    okNprogress.done();
+});
+        </pre>
+        <button type="button" class="layui-btn" id="start">开始进度条</button>
+        <button type="button" class="layui-btn" id="done">结束进度条</button>
     </div>
     <!--js逻辑-->
     <script src="../../lib/layui/layui.js"></script>
     <script>
-        layui.use(["okNprogress"], function () {
+        layui.use(["code", "okNprogress"], function () {
+            let code = layui.code;
             let okNprogress = layui.okNprogress;
+            let $ = layui.jquery;
+
+            code({
+                elem: "pre",
+                title: "代码示例"
+            });
 
             okNprogress.start();
             if (document.readyState == "complete" || document.readyState == "interactive") {
                 okNprogress.done();
             }
+
+            $("#start").click(function () {
+                okNprogress.start();
+            });
+
+            $("#done").click(function () {
+                okNprogress.done();
+            });
         });
     </script>
 </body>
diff --git a/pages/tripartite/okToastr.html b/pages/tripartite/okToastr.html
index 6d2b432..2d3e7e2 100644
--- a/pages/tripartite/okToastr.html
+++ b/pages/tripartite/okToastr.html
@@ -61,7 +61,7 @@ layui.use(["okToastr"], function () {
             let $ = layui.jquery;
 
             code({
-                elem: 'pre',
+                elem: "pre",
                 title: "代码示例"
             });
 
