"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1863],{3905:function(e,r,s){s.d(r,{Zo:function(){return c},kt:function(){return v}});var a=s(7294);function t(e,r,s){return r in e?Object.defineProperty(e,r,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[r]=s,e}function i(e,r){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),s.push.apply(s,a)}return s}function o(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{};r%2?i(Object(s),!0).forEach((function(r){t(e,r,s[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):i(Object(s)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(s,r))}))}return e}function n(e,r){if(null==e)return{};var s,a,t=function(e,r){if(null==e)return{};var s,a,t={},i=Object.keys(e);for(a=0;a<i.length;a++)s=i[a],r.indexOf(s)>=0||(t[s]=e[s]);return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)s=i[a],r.indexOf(s)>=0||Object.prototype.propertyIsEnumerable.call(e,s)&&(t[s]=e[s])}return t}var l=a.createContext({}),p=function(e){var r=a.useContext(l),s=r;return e&&(s="function"==typeof e?e(r):o(o({},r),e)),s},c=function(e){var r=p(e.components);return a.createElement(l.Provider,{value:r},e.children)},d={inlineCode:"code",wrapper:function(e){var r=e.children;return a.createElement(a.Fragment,{},r)}},m=a.forwardRef((function(e,r){var s=e.components,t=e.mdxType,i=e.originalType,l=e.parentName,c=n(e,["components","mdxType","originalType","parentName"]),m=p(s),v=t,g=m["".concat(l,".").concat(v)]||m[v]||d[v]||i;return s?a.createElement(g,o(o({ref:r},c),{},{components:s})):a.createElement(g,o({ref:r},c))}));function v(e,r){var s=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=s.length,o=new Array(i);o[0]=m;var n={};for(var l in r)hasOwnProperty.call(r,l)&&(n[l]=r[l]);n.originalType=e,n.mdxType="string"==typeof e?e:t,o[1]=n;for(var p=2;p<i;p++)o[p]=s[p];return a.createElement.apply(null,o)}return a.createElement.apply(null,s)}m.displayName="MDXCreateElement"},2695:function(e,r,s){s.d(r,{Z:function(){return n}});var a=s(7462),t=s(3366),i=s(7294),o=["isBad","isGood","children","disableFullscreen","limitWidth"];function n(e){var r=e.isBad,s=e.isGood,n=e.children,l=e.disableFullscreen,p=e.limitWidth,c=(0,t.Z)(e,o),d=(0,i.useState)(!1),m=d[0],v=d[1];return i.createElement("div",{className:"preview-box-wrapper",style:p?{width:p,display:"table",margin:"0 auto"}:{}},!l&&i.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var r=e.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():r.requestFullscreen?r.requestFullscreen():r.webkitRequestFullscreen?r.webkitRequestFullscreen():r.msRequestFullscreen&&r.msRequestFullscreen(),v(!m)}},m?i.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},i.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):i.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},i.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),r&&i.createElement("div",{className:"is-bad-example style-red"},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},i.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),s&&i.createElement("div",{className:"is-good-example style-green"},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},i.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),i.createElement("iframe",(0,a.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:n},c)))}},9702:function(e,r,s){s.r(r),s.d(r,{frontMatter:function(){return l},contentTitle:function(){return p},metadata:function(){return c},toc:function(){return d},default:function(){return v}});var a=s(7462),t=s(3366),i=(s(7294),s(3905)),o=s(2695),n=["components"],l={title:"Progress"},p=void 0,c={unversionedId:"components/progress",id:"components/progress",isDocsHomePage:!1,title:"Progress",description:"Show the state of something with the progress component of FlatifyCSS, it has its custom HTML, this is not a `` because customizing it is kind of a mess so we create our custom progress.",source:"@site/docs/components/progress.mdx",sourceDirName:"components",slug:"/components/progress",permalink:"/docs/components/progress",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/progress.mdx",tags:[],version:"current",frontMatter:{title:"Progress"},sidebar:"tutorialSidebar",previous:{title:"Popovers",permalink:"/docs/components/popover"},next:{title:"Search bar",permalink:"/docs/components/search-bar"}},d=[{value:"Simple progress examples",id:"simple-progress-examples",children:[],level:2},{value:"Processing",id:"processing",children:[],level:2},{value:"Bordered",id:"bordered",children:[],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Colors",id:"colors",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],m={toc:d};function v(e){var r=e.components,s=(0,t.Z)(e,n);return(0,i.kt)("wrapper",(0,a.Z)({},m,s,{components:r,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Show the state of something with the progress component of FlatifyCSS, it has its custom HTML, this is not a ",(0,i.kt)("inlineCode",{parentName:"p"},"<progress>")," because customizing it is kind of a mess so we create our custom progress."),(0,i.kt)("h2",{id:"simple-progress-examples"},"Simple progress examples"),(0,i.kt)("p",null,"To have a progress component we must have two elements: ",(0,i.kt)("inlineCode",{parentName:"p"},".progress")," and inside it a ",(0,i.kt)("inlineCode",{parentName:"p"},".progress-bar")," element.",(0,i.kt)("br",{parentName:"p"}),"\n","Note that the progress bar should be styled by its share for example if 25% of the job is done you should set ",(0,i.kt)("inlineCode",{parentName:"p"},"width: 25%")," or use ",(0,i.kt)("a",{parentName:"p",href:"/docs/helpers/width-and-height-setters"},"width setter helper classes"),"."),(0,i.kt)(o.Z,{height:"270px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Progress</title> </head> <body> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress" style="margin-bottom: 0"> <div class="progress-bar flex-center dynamic-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="logger" style="padding: 10px"></div> </body> <script> var progress = document.querySelector(".dynamic-progress-bar"); var logger = document.querySelector(".logger"); progress.style.width = 0; progress.setAttribute("aria-valuenow",0); function setProgressBar() { setTimeout(function () { progress.style.width = "10%"; progress.setAttribute("aria-valuenow", 10); progress.closest(".progress").classList.add("processing"); progress.classList.remove("style-green"); logger.innerHTML = ` width: 10% <br> aria-valuenow: 10 <br> Added ".processing" class <br> Removed ".style-green" class <br> `; }, 500); setTimeout(function () { progress.style.width = "15%"; progress.setAttribute("aria-valuenow", 15); logger.innerHTML = ` width: 15% <br> aria-valuenow: 15 <br> `; }, 2000); setTimeout(function () { progress.style.width = "30%"; progress.setAttribute("aria-valuenow", 30); logger.innerHTML = ` width: 30% <br> aria-valuenow: 30 <br> `; }, 3000); setTimeout(function () { progress.style.width = "90%"; progress.setAttribute("aria-valuenow", 90); logger.innerHTML = ` width: 90% <br> aria-valuenow: 90 <br> `; setTimeout(function () { progress.classList.add("style-red"); logger.innerHTML += ` Added ".style-red" class <br> `; }, 4000); }, 5000); setTimeout(function () { progress.style.width = "100%"; progress.setAttribute("aria-valuenow", 100); progress.closest(".progress").classList.remove("processing"); progress.classList.remove("style-red"); progress.classList.add("style-green"); logger.innerHTML = ` width: 100% <br> aria-valuenow: 100 <br> Added ".style-green" class <br> Removed ".style-red" class <br> Removed ".processing" class <br> `; }, 12000); } setInterval(setProgressBar,15000); setProgressBar(); <\/script>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,i.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Accessibility matters!")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"We have a custom progress component with the custom HTML structure, by default they are just some ",(0,i.kt)("inlineCode",{parentName:"p"},"<div>"),"s, so they do not make sense for accessibility."),(0,i.kt)("p",{parentName:"div"},"A comprehensive progress bar must have these attributes:",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},'role="progressbar"')," for progress bar element to define it is the progress bar.",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},'aria-valuenow="0"')," it is the same as ",(0,i.kt)("inlineCode",{parentName:"p"},'<progress value="0">')," that should be added to the progress bar.",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},'aria-valuemin="0"')," & ",(0,i.kt)("inlineCode",{parentName:"p"},'aria-valuemax="100"')," like ",(0,i.kt)("inlineCode",{parentName:"p"},'<progress min="0" max="100">')))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="progress">\n  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>\n</div>\n\n<div class="progress">\n  <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>\n</div>\n\n<div class="progress" style="margin-bottom: 0">\n  <div class="progress-bar flex-center" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">\n    Loading...\n  </div>\n</div>\n')),(0,i.kt)("h2",{id:"processing"},"Processing"),(0,i.kt)("p",null,"There is a class called ",(0,i.kt)("inlineCode",{parentName:"p"},".processing")," for adding the effect that the work is in progress."),(0,i.kt)(o.Z,{height:"140px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Progress</title> </head> <body> <div class="progress processing"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing"> <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="progress processing">...</div>\n')),(0,i.kt)("h2",{id:"bordered"},"Bordered"),(0,i.kt)("p",null,"By default progress does not have a border, but you can have it by adding the ",(0,i.kt)("inlineCode",{parentName:"p"},".bordered")," class."),(0,i.kt)(o.Z,{height:"140px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Progress</title> </head> <body> <div class="progress bordered"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress bordered"> <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress bordered" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="progress bordered">...</div>\n')),(0,i.kt)("h2",{id:"sizes"},"Sizes"),(0,i.kt)("p",null,"To change the progress size use ",(0,i.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,i.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,i.kt)(o.Z,{height:"230px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Progress</title> </head> <body> <div class="progress processing size-xs" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress processing size-lg" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div class="progress processing size-3x" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="progress size-xs">...</div>\n<div class="progress size-lg">...</div>\n<div class="progress processing size-3x">...</div>\n')),(0,i.kt)("h2",{id:"colors"},"Colors"),(0,i.kt)("p",null,"There are helper classes for styling elements like progress, first read about ",(0,i.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),"."),(0,i.kt)(o.Z,{height:"270px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Progress</title> </head> <body> <div class="progress processing style-light-light"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-light"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-purple"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-red"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-orange"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-yellow-light" style="margin-bottom: 0"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-green-light" style="margin-bottom: 0"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing style-dark-light"> <div class="progress-bar width-50p" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("h2",{id:"customization"},"Customization"),(0,i.kt)("p",null,"Each progress has these CSS variables for customization, they can be set as ",(0,i.kt)("inlineCode",{parentName:"p"},":root")," for all progress components default style or just for a specific selector."),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__progress-bg-color"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__progress-txt-color"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__progress-border-color"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__progress-animation-duration")),(0,i.kt)("p",null,"The progress bar uses accent color as the background color which can be customized with:"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__color-accent-primary")," for progress bar background color.",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__color-accent-light")," for progress bar processing state element background color."),(0,i.kt)(o.Z,{height:"140px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Progress</title> <style> .my-custom-progress-bar{ --flatify__color-accent-primary: linear-gradient(to right, #8a2387, #e94057, #f27121); --flatify__color-accent-light: rgba(255,255,255,0.75); --flatify__progress-bg-color: #F5F7FA; --flatify__progress-txt-color: #fff; --flatify__progress-border-color: #f0c2ee; --flatify__progress-animation-duration: 1s; } </style> </head> <body> <div class="progress my-custom-progress-bar"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing my-custom-progress-bar"> <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing bordered my-custom-progress-bar" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="progress my-custom-progress-bar">\n  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>\n</div>\n\n<div class="progress processing my-custom-progress-bar">\n  <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>\n</div>\n\n<div class="progress processing bordered my-custom-progress-bar" style="margin-bottom: 0">\n  <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">\n    25%\n  </div>\n</div>\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".my-custom-progress-bar {\n  --flatify__color-accent-primary: linear-gradient(to right, #8a2387, #e94057, #f27121);\n  --flatify__color-accent-light: rgba(255, 255, 255, 0.75);\n  --flatify__progress-bg-color: #f5f7fa;\n  --flatify__progress-txt-color: #fff;\n  --flatify__progress-border-color: #f0c2ee;\n  --flatify__progress-animation-duration: 1s;\n}\n")))}v.isMDXComponent=!0}}]);