import{Bt as e,It as t,Lt as n,Mt as r,Qt as i,Vt as a,Xt as o,qt as s}from"./index-qNrWYJXL.js";var c={};function l(r,c){let l=o(`DocsComponents`),u=o(`CCardHeader`),d=o(`CProgressBar`),f=o(`CProgress`),p=o(`DocsExample`),m=o(`CCardBody`),h=o(`CCard`),g=o(`CCol`),_=o(`CRow`);return s(),n(_,null,{default:i(()=>[a(g,{xs:12},{default:i(()=>[a(l,{href:`components/progress.html`}),a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Basic example`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[1]||=t(`p`,{class:`text-body-secondary small`},[e(` Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don'tuse `),t(`a`,{href:`https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress`},[e(` the HTML5 `),t(`code`,null,`<progress>`),e(` element `)]),e(` , ensuring you can stack progress bars, animate them, and place text labels over them. `)],-1),a(p,{href:`components/progress.html`},{default:i(()=>[a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:0})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:25})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:50})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:75})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:100})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[2]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Labels`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[4]||=t(`p`,{class:`text-body-secondary small`},[e(` Add labels to your progress bars by placing text within the `),t(`code`,null,`<CProgressBar>`),e(`. `)],-1),a(p,{href:`components/progress.html#labels`},{default:i(()=>[a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:25},{default:i(()=>[...c[3]||=[e(`25%`,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[5]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Height`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[6]||=t(`p`,{class:`text-body-secondary small`},[e(` We only set a `),t(`code`,null,`height`),e(` value on the `),t(`code`,null,`<CProgress>`),e(`, so if you change that value the inner `),t(`code`,null,`<CProgressBar>`),e(` will automatically resize accordingly. `)],-1),a(p,{href:`components/progress.html#height`},{default:i(()=>[a(f,{height:1,class:`mb-3`},{default:i(()=>[a(d,{value:25})]),_:1}),a(f,{height:20,class:`mb-3`},{default:i(()=>[a(d,{value:25})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[7]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Backgrounds`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[8]||=t(`p`,{class:`text-body-secondary small`},[e(` Use `),t(`code`,null,`color`),e(` prop to change the appearance of individual progress bars. `)],-1),a(p,{href:`components/progress.html#backgrounds`},{default:i(()=>[a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`success`,value:25})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`info`,value:50})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`warning`,value:75})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`danger`,value:100})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[9]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Multiple bars`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[10]||=t(`p`,{class:`text-body-secondary small`},` Include multiple progress bars in a progress component if you need. `,-1),a(p,{href:`components/progress.html#multiple-bars`},{default:i(()=>[a(f,{class:`mb-3`},{default:i(()=>[a(d,{value:15}),a(d,{color:`success`,value:30}),a(d,{color:`info`,value:20})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[11]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Striped`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[12]||=t(`p`,{class:`text-body-secondary small`},[e(` Add `),t(`code`,null,`variant="striped"`),e(` to any `),t(`code`,null,`<CProgressBar>`),e(` to apply a stripe via CSS gradient over the progress bar's background color. `)],-1),a(p,{href:`components/progress.html#striped`},{default:i(()=>[a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`success`,variant:`striped`,value:25})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`info`,variant:`striped`,value:50})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`warning`,variant:`striped`,value:75})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`danger`,variant:`striped`,value:100})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(g,{xs:12},{default:i(()=>[a(h,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[13]||=[t(`strong`,null,`Vue Progress`,-1),e(),t(`small`,null,`Animated stripes`,-1)]]),_:1}),a(m,null,{default:i(()=>[c[14]||=t(`p`,{class:`text-body-secondary small`},[e(` The striped gradient can also be animated. Add `),t(`code`,null,`animated`),e(` property to `),t(`code`,null,`<CProgressBar>`),e(` to animate the stripes right to left via CSS3 animations. `)],-1),a(p,{href:`components/progress.html#animated-stripes`},{default:i(()=>[a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`success`,variant:`striped`,animated:``,value:25})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`info`,variant:`striped`,animated:``,value:50})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`warning`,variant:`striped`,animated:``,value:75})]),_:1}),a(f,{class:`mb-3`},{default:i(()=>[a(d,{color:`danger`,variant:`striped`,animated:``,value:100})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var u=r(c,[[`render`,l]]);export{u as default};