/react-ring-progress

RingProgress component for react.

Primary LanguageTypeScript

react-ring-progress

RingProgress component for react.

version license size download

installation

npm install -S @jswork/react-ring-progress

usage

  1. import css
@import "~@jswork/react-ring-progress/dist/style.css";

// or use sass
@import "~@jswork/react-ring-progress/dist/style.scss";
  1. import js
import ReactRingProgress from '@jswork/react-ring-progress/main';
import '@jswork/react-ring-progress/dist/style.scss';

function App() {
  return (
    <div className="m-10 p-4 shadow bg-gray-100 text-gray-800 hover:shadow-md transition-all">
      <div className="badge badge-warning absolute right-0 top-0 m-4">
        Build Time: {BUILD_TIME}
      </div>
      <div className="size-50 mx-auto">
        <ReactRingProgress
          lineCap="round"
          stroke={{ start: '#007aff', end: '#ff5722' }}
          value={80}
          lineWidth={10}>
          <div className="absolute text-center layout-trans-center-xy y">
            <p>竞争力</p>
            <h2 className="f-10">80%</h2>
          </div>
        </ReactRingProgress>
      </div>
    </div>
  );
}

export default App;

preview

license

Code released under the MIT license.