mt-progress-kit
v1.0.1
Published
React progress components kit with circular and line progress bars
Downloads
18
Maintainers
canz0Readme
Progress Kit
A React progress bar components kit. Includes provider for automatic page transitions and manual progress components.
Installation
npm install mt-progress-kitUsage
Progress Provider (Automatic Page Transitions)
'use client';
import { ProgressProvider } from 'mt-progress-kit';
function App() {
return (
<div>
<ProgressProvider
type="line"
height="4px"
bgColor="#007bff"
/>
{/*content */}
</div>
);
}
Layout Example
'use client';
import { ProgressProvider } from 'mt-progress-kit';
function Layout({ children }) {
return (
<html lang="en">
<body>
<ProgressProvider
type="line"
height="3px"
bgColor="#007bff"
/>
{children}
</body>
</html>
);
}Circular Progress (Manual)
import { CircularProgress } from 'mt-progress-kit';
function App() {
return (
<CircularProgress
value={75}
size="medium"
variant="primary"
/>
);
}Line Progress (Manual)
import { LineProgress } from 'mt-progress-kit';
function App() {
return (
<LineProgress
value={60}
size="medium"
variant="success"
/>
);
}Half Circular Progress
import { HalfProgress } from 'mt-progress-kit';
function App() {
return (
<HalfProgress
value={50}
size="medium"
variant="warning"
/>
);
}
License
MIT