Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A ProgressBar displays a normalized value between 0 and 1. It may animate up to full or down to empty.

PropTypeNotes
valuenumberA number between zero and one.
animatebooleanWhen true, the ProgresrsBar will animate to full.
countdownbooleanWhen true, the ProgressBar will animate to zero. Requires animate.
durationnumberThe animation's duration in seconds.
onAnimationCompletefunctionFired when the ProgressBar finishes its animation.

Examples

// Overrides

import { Override } from 'framer'

export function ProgressBarExample(): Override {
	return {
    value: 0
    animate: true,
    countdown: false,
    onAnimationComplete: () => console.log("Complete!")
	}
}
// Code component

import * as React from "react";
import { Frame } from "framer";
// @ts-ignore
import { ProgressBar } from "@framer/steveruizok.education/code";

export const ProgressBarExample = props => {
  const handleAnimationComplete = () => {
    console.log("Complete!");
  };

  return (
    <Frame size="100%" background="none">
      <ProgressBar
        center
        value={0}
        animate
        countdown={false}
        onAnimationComplete={handleAnimationComplete}
      />
    </Frame>
  );
};