1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[28],{38804:function(e,s,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design-system/progressbars",function(){return l(32115)}])},32115:function(e,s,l){"use strict";l.r(s);var r=l(85893),i=l(67294),a=l(13494);function c(e,s){return Math.floor(Math.random()*(s-e+1))+e}var d=function(){var e=(0,i.useState)(0),s=e[0],l=e[1],a=(0,i.useState)(0),d=a[0],t=a[1],n=(0,i.useState)(0),x=n[0],o=n[1],h=(0,i.useState)(0),m=h[0],j=h[1];return(0,i.useEffect)((function(){var e=setInterval((function(){l(c(0,100)),t(c(0,100)),o(c(0,100)),j(c(0,100))}),2e3);return function(){return clearInterval(e)}}),[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("h1",{className:"mb-2",children:"Progress bar"}),(0,r.jsxs)("div",{className:"mb-12",id:"linear",children:[(0,r.jsx)("h2",{className:"h3 mb-3",children:"Linear"}),(0,r.jsx)("div",{className:"surface rounded-lg p-4",children:(0,r.jsx)("div",{className:"",children:(0,r.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row lg:items-center",children:[(0,r.jsx)("div",{className:"flex-1 space-y-4",children:(0,r.jsxs)("div",{className:"w-full flex flex-col gap-4 items-center",children:[(0,r.jsx)("div",{className:"progressbar w-full",children:(0,r.jsx)("div",{style:{width:"".concat(s,"%")}})}),(0,r.jsx)("div",{className:"progressbar w-full",style:{"--percent":d},children:(0,r.jsx)("div",{})}),(0,r.jsx)("div",{className:"progressbar w-full",style:{"--percent":x},children:(0,r.jsx)("div",{})}),(0,r.jsx)("div",{className:"progressbar w-full",style:{"--percent":m},children:(0,r.jsx)("div",{})})]})}),(0,r.jsx)("div",{className:"flex-1",children:(0,r.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/r6og8tLk/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})})]}),(0,r.jsxs)("div",{className:"mb-12",id:"radial",children:[(0,r.jsx)("h2",{className:"h3 mb-3",children:"Radial"}),(0,r.jsx)("div",{className:"surface rounded-lg p-4",children:(0,r.jsx)("div",{className:"",children:(0,r.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row lg:items-center",children:[(0,r.jsx)("div",{className:"flex-1 space-y-4",children:(0,r.jsxs)("div",{className:"w-full grid grid-cols-2 grid-rows-2 gap-4 items-center justify-center",children:[(0,r.jsxs)("div",{className:"progressbar-radial",children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"text-2xl font-headings font-bold",children:[s,"%"]}),(0,r.jsx)("div",{className:"text-xs text-ui-300 uppercase",children:"win rate"})]})}),(0,r.jsx)("svg",{viewBox:"0 0 40 40",style:{"--percent":s},children:(0,r.jsx)("circle",{cx:"20",cy:"20",r:"16"})})]}),(0,r.jsxs)("div",{className:"progressbar-radial",children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"text-2xl font-headings font-bold",children:[d,"%"]}),(0,r.jsx)("div",{className:"text-xs text-ui-300 uppercase",children:"win rate"})]})}),(0,r.jsx)("svg",{viewBox:"0 0 40 40",style:{"--percent":d},children:(0,r.jsx)("circle",{cx:"20",cy:"20",r:"16"})})]}),(0,r.jsxs)("div",{className:"progressbar-radial",children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"text-2xl font-headings font-bold",children:[x,"%"]}),(0,r.jsx)("div",{className:"text-xs text-ui-300 uppercase",children:"win rate"})]})}),(0,r.jsx)("svg",{viewBox:"0 0 40 40",style:{"--percent":x},children:(0,r.jsx)("circle",{cx:"20",cy:"20",r:"16"})})]}),(0,r.jsxs)("div",{className:"progressbar-radial",children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"text-2xl font-headings font-bold",children:[m,"%"]}),(0,r.jsx)("div",{className:"text-xs text-ui-300 uppercase",children:"win rate"})]})}),(0,r.jsx)("svg",{viewBox:"0 0 40 40",children:(0,r.jsx)("circle",{cx:"20",cy:"20",r:"16",style:{strokeDashoffset:"calc((1px * ".concat(m,") - 100px)")}})})]})]})}),(0,r.jsx)("div",{className:"flex-1",children:(0,r.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/vbk023ta/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})})]}),(0,r.jsxs)("div",{className:"mb-12",id:"size",children:[(0,r.jsx)("h2",{className:"h3 mb-3",children:"Size"}),(0,r.jsx)("div",{className:"surface rounded-lg p-4",children:(0,r.jsx)("div",{className:"",children:(0,r.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row items-center",children:[(0,r.jsxs)("div",{className:"flex-1 space-y-8",children:[(0,r.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,r.jsx)("div",{className:"w-1/4 text-ui-400 text-right text-sm leading-tight pr-4",children:"Small"}),(0,r.jsxs)("div",{className:"flex-1 w-full flex flex-col gap-4 justify-start items-start pl-8 border-l border-ui-700",children:[(0,r.jsx)("div",{className:"progressbar progressbar-sm w-full mt-0.5",style:{"--percent":s},children:(0,r.jsx)("div",{})}),(0,r.jsxs)("div",{className:"progressbar-sm progressbar-radial m-0",children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"text-xl font-headings font-bold",children:[d,"%"]}),(0,r.jsx)("div",{className:"text-xs text-ui-300 uppercase",children:"win rate"})]})}),(0,r.jsx)("svg",{viewBox:"0 0 40 40",style:{"--percent":d},children:(0,r.jsx)("circle",{cx:"20",cy:"20",r:"16"})})]})]})]}),(0,r.jsxs)("div",{className:"flex gap-4 items-center",children:[(0,r.jsx)("div",{className:"w-1/4 text-ui-400 text-right text-sm leading-tight pr-4",children:"Extra small"}),(0,r.jsxs)("div",{className:"flex-1 w-full flex flex-col gap-4 justify-start items-start pl-8 border-l border-ui-700",children:[(0,r.jsx)("div",{className:"progressbar progressbar-xs w-full mt-0.5",style:{"--percent":s},children:(0,r.jsx)("div",{})}),(0,r.jsx)("div",{className:"progressbar-xs progressbar-radial m-0",children:(0,r.jsx)("svg",{viewBox:"0 0 40 40",style:{"--percent":d},children:(0,r.jsx)("circle",{cx:"20",cy:"20",r:"16"})})})]})]})]}),(0,r.jsx)("div",{className:"flex-1",children:(0,r.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/Lqwb35of/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})})]}),(0,r.jsxs)("div",{className:"mb-12",id:"secondary",children:[(0,r.jsx)("h2",{className:"h3 mb-3",children:"Secondary"}),(0,r.jsx)("div",{className:"surface rounded-lg p-4",children:(0,r.jsx)("div",{className:"",children:(0,r.jsxs)("div",{className:"flex gap-4 flex-col lg:flex-row items-center",children:[(0,r.jsx)("div",{className:"flex-1 space-y-8",children:(0,r.jsxs)("div",{className:"progressbar progressbar-secondary w-full",style:{"--percent":50,"--progress":25},children:[(0,r.jsx)("div",{}),(0,r.jsx)("div",{})]})}),(0,r.jsx)("div",{className:"flex-1",children:(0,r.jsx)("iframe",{className:"rounded",width:"100%",height:"300",src:"//jsfiddle.net/augustin_hiebel/qgn9msr3/embedded/html/dark/?bodyColor=333366&menuColor=1F1F42&fontColor=FFFFFF&accentColor=13F094"})})]})})})]})]})};d.getLayout=a.G,s.default=d}},function(e){e.O(0,[1664,5797,3494,9774,2888,179],(function(){return s=38804,e(e.s=s);var s}));var s=e.O();_N_E=s}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.