<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css" /> <!-- <script src="/fineui.js"></script> --> <script src="https://fanruan.design/fineui/2.0/fineui.js"></script> </head> <body> <div id="wrapper"></div> <script> var LoadingPane = BI.inherit(BI.Pane, {}); BI.shortcut("demo.loading_pane", LoadingPane); var loadingPane; BI.createWidget({ type: "bi.vertical", element: "#wrapper", items: [{ type: "bi.vertical", items: [{ type: "demo.loading_pane", width: 800, height: 600, cls: "bi-border", ref: function(ref) { loadingPane = ref; }, }, { type: "bi.left", rgap: 10, items: [{ type: "bi.button", text: "开始loading", handler: function () { loadingPane.loading(); }, }, { type: "bi.button", text: "停止loading", handler: function () { loadingPane.loaded(); }, }, { type: "bi.button", text: "设置文字loading", handler: function () { BI.config("bi.provider.system", function (provider) { provider.setLoadingCreator(function () { return { type: "bi.label", text: "我是被替换了的loading" }; }); }); }, }, { type: "bi.button", text: "恢复波浪线loading", handler: function () { BI.config("bi.provider.system", function (provider) { provider.setLoadingCreator(function () { return { type: "bi.horizontal", cls: "bi-loading-widget", height: 30, width: 30, hgap: 5, vgap: 2.5, items: [{ type: "bi.layout", cls: "animate-rect rect1", height: 25, width: 2.5 }, { type: "bi.layout", cls: "animate-rect rect2", height: 25, width: 2.5 }, { type: "bi.layout", cls: "animate-rect rect3", height: 25, width: 2.5 }] }; }); }); }, }] }], }], }); </script> </body> </html>