Skip to content
Please note that GitHub no longer supports Internet Explorer.

We recommend upgrading to the latest Microsoft Edge, Google Chrome, or Firefox.

Learn more

Instantly share code, notes, and snippets.

@emmabostian emmabostian/progress.js
Last active Jan 31, 2020

Embed
What would you like to do?
import React, { useState } from "react";
import { animated, useSpring, config } from "react-spring";
import "./styles.css";
export default function App() {
const [progress, setProgress] = useState("0%");
const props = useSpring({ width: progress, config: config.slow });
return (
<div className="App">
<div className="button-bar">
<button onClick={() => setProgress("0%")}>0%</button>
<button onClick={() => setProgress("25%")}>25%</button>
<button onClick={() => setProgress("50")}>50%</button>
<button onClick={() => setProgress("75")}>75%</button>
<button onClick={() => setProgress("100")}>100%</button>
</div>
<div className="meter">
<animated.span style={props} />
</div>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.