WebApp快捷打包
加载进度动画
转到模块插件

敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多

JS-SDK 引用方式:

♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241118.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package

progress 显示动画

//显示动画
//注意此动画为非模态(modeless)窗口,不会阻止UI交互
jsBridge.progress({
  //必须,布尔类型,显示或隐藏动画
  visible: true,
  //可选,数字类型,动画样式,范围 2-11,请参考“加载进度动画”功能的样式序号
  //默认 4
  style  : 4,
  //可选,字符串类型 #RRGGBB 或 #AARRGGBB(含透明度) 颜色值,前景色
  //默认 #D9D9D9(可包含透明度,如 #88D9D9D9 表示半透明浅灰色)
  foregroundColor: "#D9D9D9",
  //可选,字符串类型 #RRGGBB 或 #AARRGGBB(含透明度) 颜色值,背景色
  //默认 #AA000000(可以包含透明度,如 #AA000000 表示半透明黑色)
  backgroundColor: "#AA000000"
});

//5秒后关闭
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress 显示动画 自定义颜色

//显示动画 自定义颜色
jsBridge.progress({
  visible: true,
  style  : 4,
  foregroundColor: "#DD6666",
  backgroundColor: "#DDE4B4D1"
});

//5秒后关闭
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress 显示动画 透明背景

//显示动画 透明背景
jsBridge.progress({
  visible: true,
  style  : 4,
  foregroundColor: "#66DD66",
  backgroundColor: "#00000000"
});

//5秒后关闭
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress 关闭动画

//关闭动画
jsBridge.progress({
  visible: false
});

progress style 2

jsBridge.progress({
  visible: true,
  style  : 2
});
//3秒后关闭
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 3

jsBridge.progress({
  visible: true,
  style  : 3
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 4

jsBridge.progress({
  visible: true,
  style  : 4
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 5

jsBridge.progress({
  visible: true,
  style  : 5
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 6

jsBridge.progress({
  visible: true,
  style  : 6
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 7

jsBridge.progress({
  visible: true,
  style  : 7
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 8

jsBridge.progress({
  visible: true,
  style  : 8
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 9

jsBridge.progress({
  visible: true,
  style  : 9
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 10

jsBridge.progress({
  visible: true,
  style  : 10
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);

progress style 11

jsBridge.progress({
  visible: true,
  style  : 11
});
setTimeout(function() {
  jsBridge.progress({ visible: false });
}, 5000);