A loading spinner with a bit more life: the arc stretches and shrinks as it turns, moves through three colours, and sheds small sparks from its head that shrink away within a third of a second.
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
- 1One trim for every strokeA shared trim path draws the arc and its glow, so they stretch together.
- 2A colour per turnThree copies of the arc, each bound to a colour, cross-fade at the end of every turn.
- 3Sparks are timed, not simulatedEach spark is born where the head is at that moment and shrinks as it drifts out.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function SparkSpinner() {
const { rive, RiveComponent } = useRive({
src: '/spark-spinner.riv',
artboard: 'Spark Spinner',
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('color1').value = 0xFFFF5C8A;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: color1, color2, color3. All on the SparkSpinner view model.