103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
CCard,
|
|
CCardBody,
|
|
CCardHeader,
|
|
CProgress,
|
|
CProgressBar
|
|
} from '@coreui/react'
|
|
|
|
const ProgressBar = () => {
|
|
return (
|
|
<>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<div className="card-header-actions">
|
|
<a href="https://coreui.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
<small className="text-muted">docs</small>
|
|
</a>
|
|
</div>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress className="mb-3" />
|
|
<CProgress value={25} className="mb-3" />
|
|
<CProgress value={50} className="mb-3" />
|
|
<CProgress value={75} className="mb-3" />
|
|
<CProgress value={100} className="mb-3" />
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<small> labels</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress value={25.3746472} showPercentage precision={2} className="mb-3"/>
|
|
<CProgress value={50.45} showValue className="mb-3"/>
|
|
<CProgress value={15} max={20} showPercentage className="mb-3"/>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<small> heights</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress value={25} className="mb-3" style={{height: "3px"}}/>
|
|
<CProgress value={25} className="mb-3" style={{height: "30px"}}/>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<small> backgrounds</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress color="success" value="25" className="mb-3" />
|
|
<CProgress color="info" value={50} className="mb-3" />
|
|
<CProgress color="warning" value={75} className="mb-3" />
|
|
<CProgress color="danger" value="100" className="mb-3" />
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<small> multiple bar</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress size="xs">
|
|
<CProgressBar value={10}/>
|
|
<CProgressBar color="success" value={30}/>
|
|
<CProgressBar color="danger" value={20}/>
|
|
</CProgress>
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<small> striped</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress striped value={2 * 5} className="mb-3" />
|
|
<CProgress striped color="success" value={25} className="mb-3" />
|
|
<CProgress striped color="info" value={50} className="mb-3" />
|
|
<CProgress striped color="warning" value={75} className="mb-3" />
|
|
<CProgress striped color="danger" value={100} className="mb-3" />
|
|
</CCardBody>
|
|
</CCard>
|
|
<CCard>
|
|
<CCardHeader>
|
|
Progress
|
|
<small> animated</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CProgress animated value={75} className="mb-3" />
|
|
</CCardBody>
|
|
</CCard>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ProgressBar
|