A candy-striped progress bar for your app's real progress: set a number from 0 to 100 and the bar glides there, stripes flowing. At 100 the bar pops.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1Progress is one numberA converter turns 0 to 100 into the width of the candy fill.
- 2It glides, it doesn't jumpAn interpolator converter eases every new value over 0.7 seconds.
- 3100 is a stateThe state machine watches the number and plays the pop when it reaches 100.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function CandyProgress() {
const { rive, RiveComponent } = useRive({
src: '/candy-progress.riv',
artboard: 'Candy Progress',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFFFF4F7B;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: progress, color, stripe. All on the CandyProgress view model.