在vibeknow中为流程节点添加进度条加载动画需先启用「节点状态追踪」，再于节点属性中选择进度条样式，支持css变量或内联样式自定义颜色与动效，并须在onsuccess和onerror回调中调用this.hideloading()确保进度条正确收起。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在VibeKnow中为流程节点添加进度条加载动画，能让用户直观感知当前步骤的执行状态，避免因接口响应延迟产生“卡死”错觉。必须先确认当前流程已启用「节点状态追踪」功能，否则进度条不会触发渲染。

启用节点状态追踪并绑定加载动画

进入流程编辑页→点击右上角「设置」图标→勾选【启用节点状态追踪】→保存设置。这一步是加载动画生效的前提，未勾选时所有节点状态均不会上报，进度条永远静止。

返回流程画布，双击任意需要显示加载动画的节点（如「调用AI接口」或「写入数据库」）→在右侧属性面板找到「执行反馈」区域→将「加载动画样式」下拉菜单切换为「进度条（环形）」或「进度条（线性）」。

自定义进度条颜色与触发动效

方法一：通过CSS变量覆盖（推荐用于全局统一）
在项目根目录的public/index.html中，【在内最后一个以下代码：
:root { --vkb-progress-color: #4a6fa5; --vkb-progress-height: 3px; }

VibeKnow

一款AI视频创作工具，主要用于全球首个AI知识视频创作平台，文档、文章、网页，一键生成视频，适合需要提升相关任务效率的用户。

下载

方法二：单节点局部覆盖
仍处于节点编辑态，在「执行反馈」区域展开「高级设置」→粘贴以下内联样式到「自定义CSS」输入框：
.vkb-node-loading::before { animation-duration: 1.2s; }。注意此处不能修改height或background，否则会破坏VibeKnow内部的进度计算逻辑。

配置节点完成后的进度条收起行为

第一步：打开该节点的「节点脚本」编辑器。
第二步：在onSuccess回调函数末尾添加：
this.hideLoading();
第三步：如果节点存在重试机制，需在onError中同样调用this.hideLoading();，否则错误后进度条会持续旋转，误导用户认为仍在处理。

这一步操作起来很简单，直接把两行代码复制进去就行。但漏掉onError里的调用会导致用户看到红色报错弹窗的同时，进度条还在转，体验非常割裂。