在VibeKnow中为流程节点添加进度条加载动画需先启用「节点状态追踪」,再于节点属性中选择进度条样式,支持CSS变量或内联样式自定义颜色与动效,并须在onSuccess和onError回调中调用this.hideLoading()确保进度条正确收起。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在VibeKnow中为流程节点添加进度条加载动画,能让用户直观感知当前步骤的执行状态,避免因接口响应延迟产生“卡死”错觉。必须先确认当前流程已启用「节点状态追踪」功能,否则进度条不会触发渲染。
启用节点状态追踪并绑定加载动画
进入流程编辑页→点击右上角「设置」图标→勾选【启用节点状态追踪】→保存设置。这一步是加载动画生效的前提,未勾选时所有节点状态均不会上报,进度条永远静止。
返回流程画布,双击任意需要显示加载动画的节点(如「调用AI接口」或「写入数据库」)→在右侧属性面板找到「执行反馈」区域→将「加载动画样式」下拉菜单切换为「进度条(环形)」或「进度条(线性)」。
自定义进度条颜色与触发动效
方法一:通过CSS变量覆盖(推荐用于全局统一)
在项目根目录的public/index.html中,【在<head>内最后一个<style>标签后插入】以下代码::root { --vkb-progress-color: #4a6fa5; --vkb-progress-height: 3px; }
方法二:单节点局部覆盖
仍处于节点编辑态,在「执行反馈」区域展开「高级设置」→粘贴以下内联样式到「自定义CSS」输入框:.vkb-node-loading::before { animation-duration: 1.2s; }。注意此处不能修改height或background,否则会破坏VibeKnow内部的进度计算逻辑。
配置节点完成后的进度条收起行为
第一步:打开该节点的「节点脚本」编辑器。
第二步:在onSuccess回调函数末尾添加:this.hideLoading();
第三步:如果节点存在重试机制,需在onError中同样调用this.hideLoading();,否则错误后进度条会持续旋转,误导用户认为仍在处理。
这一步操作起来很简单,直接把两行代码复制进去就行。但漏掉onError里的调用会导致用户看到红色报错弹窗的同时,进度条还在转,体验非常割裂。


















