"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9111],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return u}});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},s=Object.keys(e);for(a=0;a<s.length;a++)n=s[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a<s.length;a++)n=s[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var r=a.createContext({}),d=function(e){var t=a.useContext(r),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=d(e.components);return a.createElement(r.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,s=e.originalType,r=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),m=d(n),u=i,h=m["".concat(r,".").concat(u)]||m[u]||p[u]||s;return n?a.createElement(h,l(l({ref:t},c),{},{components:n})):a.createElement(h,l({ref:t},c))}));function u(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var s=n.length,l=new Array(s);l[0]=m;var o={};for(var r in t)hasOwnProperty.call(t,r)&&(o[r]=t[r]);o.originalType=e,o.mdxType="string"==typeof e?e:i,l[1]=o;for(var d=2;d<s;d++)l[d]=n[d];return a.createElement.apply(null,l)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},2695:function(e,t,n){n.d(t,{Z:function(){return o}});var a=n(7462),i=n(3366),s=n(7294),l=["isBad","isGood","children","disableFullscreen","limitWidth"];function o(e){var t=e.isBad,n=e.isGood,o=e.children,r=e.disableFullscreen,d=e.limitWidth,c=(0,i.Z)(e,l),p=(0,s.useState)(!1),m=p[0],u=p[1];return s.createElement("div",{className:"preview-box-wrapper",style:d?{width:d,display:"table",margin:"0 auto"}:{}},!r&&s.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),u(!m)}},m?s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},s.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"})):s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},s.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"}))),t&&s.createElement("div",{className:"is-bad-example style-red"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},s.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"}))),n&&s.createElement("div",{className:"is-good-example style-green"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},s.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"}))),s.createElement("iframe",(0,a.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:o},c)))}},7468:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return r},contentTitle:function(){return d},metadata:function(){return c},toc:function(){return p},default:function(){return u}});var a=n(7462),i=n(3366),s=(n(7294),n(3905)),l=n(2695),o=["components"],r={title:"Loading"},d=void 0,c={unversionedId:"components/loading",id:"components/loading",isDocsHomePage:!1,title:"Loading",description:"Types",source:"@site/docs/components/loading.mdx",sourceDirName:"components",slug:"/components/loading",permalink:"/docs/components/loading",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/loading.mdx",tags:[],version:"current",frontMatter:{title:"Loading"},sidebar:"tutorialSidebar",previous:{title:"Fireworks",permalink:"/docs/components/fireworks"},next:{title:"Menu",permalink:"/docs/components/menu"}},p=[{value:"Types",id:"types",children:[{value:"Dots",id:"dots",children:[],level:3},{value:"Spinner",id:"spinner",children:[],level:3}],level:2},{value:"Overlay loading",id:"overlay-loading",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:p};function u(e){var t=e.components,n=(0,i.Z)(e,o);return(0,s.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("h2",{id:"types"},"Types"),(0,s.kt)("p",null,"Generally, FlatifyCSS has two types of loading: dots and spinners.",(0,s.kt)("br",{parentName:"p"}),"\n","The loading component is useful when you want a delay between fetching data and showing it. It offers classes to fit various situations, you can have loadings with different colors and sizes or customize it yourself."),(0,s.kt)("h3",{id:"dots"},"Dots"),(0,s.kt)("p",null,"Create an element with the ",(0,s.kt)("inlineCode",{parentName:"p"},".loading")," class, it is a three-dot loader.",(0,s.kt)("br",{parentName:"p"}),"\n","Dots loading provide three dots with order for being shown, note that you can change the inital scale of dots value, so instead of zome out we can have zoom in! We will talk about customizing later."),(0,s.kt)(l.Z,{height:"110px",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>Loading</title> <style> html, body{ height: 100%; } </style> </head> <body class="flex-center"> <span class="loading"></span>\t </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<span class="loading"></span>\n')),(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Stop the animation!")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"To pause the loading use ",(0,s.kt)("inlineCode",{parentName:"p"},".pause-animation")," also by adding the ",(0,s.kt)("inlineCode",{parentName:"p"},".stop-animation")," class, the loading animation will be stopped."),(0,s.kt)(l.Z,{height:"110px",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>Loading</title> <style> html, body{ height: 100%; } </style> </head> <body class="flex-center"> <span class="loading stop-animation"></span>\t </body>\n</html>\n',mdxType:"PreviewBox"}))),(0,s.kt)("h3",{id:"spinner"},"Spinner"),(0,s.kt)("p",null,"Spinners are another kind of loadings, add ",(0,s.kt)("inlineCode",{parentName:"p"},".spinner")," class to an element to have a spinner loading. Spinners also support animation state changer classes like ",(0,s.kt)("inlineCode",{parentName:"p"},".pause-animation")," and ",(0,s.kt)("inlineCode",{parentName:"p"},".stop-animation"),"."),(0,s.kt)(l.Z,{height:"110px",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>Loading</title> <style> html, body{ height: 100%; } </style> </head> <body class="flex-center" style="gap: 30px"> <span class="spinner"></span>\t <span class="spinner stop-animation"></span>\t </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<span class="spinner"></span> <span class="spinner stop-animation"></span>\n')),(0,s.kt)("h2",{id:"overlay-loading"},"Overlay loading"),(0,s.kt)("p",null,"This is a situation that happens for any web developer, let's dive in.",(0,s.kt)("br",{parentName:"p"}),"\n","Imagine you use the loading component inside a button and expect when data is fetching, having a loading inside that button instead of the button text. However, if you use the loading component inside the button directly, the layout undoubtedly will shift. Check the example below to understand this case:"),(0,s.kt)("div",{className:"flex-center dual-example"},(0,s.kt)(l.Z,{disableFullscreen:!0,isBad:!0,height:"250px",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>Loading</title> </head> <body> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <br> <button class="button size-lg style-dark">Toggle me!</button> <br> Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. </body> <script> const button = document.querySelector(".button"); button.addEventListener("click", function(){ if(button.querySelector(".loading")){ button.innerHTML = `Toggle me!`; }else{ button.innerHTML = `<span class="loading"></span>`; } }); <\/script>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)(l.Z,{disableFullscreen:!0,isGood:!0,height:"250px",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>Loading</title> </head> <body> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <br> <button class="button size-lg style-dark">Toggle me!</button> <br> Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. </body> <script> const button = document.querySelector(".button"); button.addEventListener("click", function(){ if(button.querySelector(".loading")){ button.innerHTML = `Toggle me!`; button.classList.remove(`overlay-layer`); }else{ button.innerHTML = `Toggle me!<span class="loading"></span>`; button.classList.add(`overlay-layer`); } }); <\/script>\n</html>\n',mdxType:"PreviewBox"})),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1,3} title="index.html"',"{1,3}":!0,title:'"index.html"'},'<button class="button overlay-layer size-lg style-dark">\n  Toggle me!\n  <span class="loading"></span>\n</button>\n')),(0,s.kt)("p",null,"In the first example on click, there is just a loading component inside the button, so button width and height change based on it, which means layout shifts and it is the bad user experience we were talking about.",(0,s.kt)("br",{parentName:"p"}),"\n","Otherwise second example uses ",(0,s.kt)("a",{parentName:"p",href:"/docs/helpers/overlay-layer"},"overlay layer helper class"),", adds ",(0,s.kt)("inlineCode",{parentName:"p"},".overlay-layer")," class to the button and appends ",(0,s.kt)("inlineCode",{parentName:"p"},'<span class="loading"></span>')," inside button next to the button text."),(0,s.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,s.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"}))),"How it works")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"Technically overlay layer creates an overlay element with CSS ",(0,s.kt)("inlineCode",{parentName:"p"},"::before")," that comes over and hides button content and just shows the loading element, it will prevent unwanted layout shifts and changes will be done smoothly!"))),(0,s.kt)("h2",{id:"sizes"},"Sizes"),(0,s.kt)("p",null,"To change the loading component size use ",(0,s.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,s.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,s.kt)(l.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>Loading</title> <style> .flex-center{ gap: 2em; } .flex-center:not(:last-child){ margin-bottom: 1.4em; } </style> </head> <body> <div class="flex-center"> <span class="loading size-xs"></span>\t <span class="spinner size-xs"></span>\t </div> <div class="flex-center"> <span class="loading size-md"></span>\t <span class="spinner size-md"></span>\t </div> <div class="flex-center"> <span class="loading size-lg"></span>\t <span class="spinner size-lg"></span>\t </div> <div class="flex-center"> <span class="loading size-3x"></span>\t <span class="spinner size-3x"></span>\t </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<span class="loading size-xs"></span>\n<span class="spinner size-xs"></span>\n\n<span class="loading size-md"></span>\n<span class="spinner size-md"></span>\n\n<span class="loading size-lg"></span>\n<span class="spinner size-lg"></span>\n\n<span class="loading size-3x"></span>\n<span class="spinner size-3x"></span>\n')),(0,s.kt)("h2",{id:"colors"},"Colors"),(0,s.kt)("p",null,"There are helper classes for styling loading component, first read about ",(0,s.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),"."),(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Change loading color")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"By default loading component use element or its parent text color, so instead of using ",(0,s.kt)("inlineCode",{parentName:"p"},".style-red")," use ",(0,s.kt)("inlineCode",{parentName:"p"},".color-red")," to change the loading color."))),(0,s.kt)(l.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>Loading</title> <style> .flex-center{ gap: 2em; } .flex-center:not(:last-child){ margin-bottom: 1.4em; } </style> </head> <body> <div class="flex-center"> <span class="loading color-red"></span>\t <span class="spinner color-red"></span>\t <span class="spinner style-red"></span>\t </div> <div class="flex-center"> <span class="loading color-orange"></span>\t <span class="spinner color-orange"></span>\t <span class="spinner style-orange"></span>\t </div> <div class="flex-center"> <span class="loading color-green"></span>\t <span class="spinner color-green"></span>\t <span class="spinner style-green"></span>\t </div> <div class="flex-center"> <span class="loading color-blue"></span>\t <span class="spinner color-blue"></span>\t <span class="spinner style-blue"></span>\t </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<span class="loading color-red"></span>\n<span class="spinner color-red"></span>\n<span class="spinner style-red"></span>\n\n<span class="loading color-orange"></span>\n<span class="spinner color-orange"></span>\n<span class="spinner style-orange"></span>\n\n<span class="loading color-green"></span>\n<span class="spinner color-green"></span>\n<span class="spinner style-green"></span>\n\n<span class="loading color-blue"></span>\n<span class="spinner color-blue"></span>\n<span class="spinner style-blue"></span>\n')),(0,s.kt)("h2",{id:"customization"},"Customization"),(0,s.kt)("p",null,"It is possible to change loading component (both dots and spinner) color, duration and animation.",(0,s.kt)("br",{parentName:"p"}),"\n","Here is a list of loading component CSS variables to customize it."),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__loading-color"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__loading-dot-width"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__loading-dot-height"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__loading-dot-animation-start-scale"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__loading-dot-animation-duration"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__loading-spinner-animation-duration")),(0,s.kt)(l.Z,{height:"180px",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>Loading</title> <style> html, body{ height: 100%; } .my-dots-loading-1{ --flatify__loading-color: #48CFAD; --flatify__loading-dot-width: 1em; --flatify__loading-dot-height: 0.5em; --flatify__loading-dot-animation-start-scale: 0; --flatify__loading-dot-animation-duration: 0.75s; } .my-dots-loading-2{ --flatify__loading-color: #FC6E51; --flatify__loading-dot-width: 0.5em; --flatify__loading-dot-height: 2em; --flatify__loading-dot-animation-start-scale: 2; --flatify__loading-dot-animation-duration: 2s; } .my-spinner-loading-1{ --flatify__loading-color: #6A50A7; --flatify__loading-spinner-animation-duration: 2s; } .my-spinner-loading-2{ --flatify__loading-color: #AA8E69; --flatify__loading-spinner-animation-duration: 0.35s; } </style> </head> <body class="flex-center"> <div class="flex-center" style="gap: 30px"> <span class="loading my-dots-loading-1"></span>\t <span class="loading my-dots-loading-2"></span>\t <span class="spinner my-spinner-loading-1"></span>\t <span class="spinner my-spinner-loading-2"></span>\t </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'\x3c!-- Custom Dots loadings --\x3e\n<span class="loading my-dots-loading-1"></span>\n<span class="loading my-dots-loading-2"></span>\n\n\x3c!-- Custom spinner loadings --\x3e\n<span class="spinner my-spinner-loading-1"></span>\n<span class="spinner my-spinner-loading-2"></span>\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"/*  Custom Dots loadings */\n.my-dots-loading-1 {\n  --flatify__loading-color: #48cfad;\n  --flatify__loading-dot-width: 1em;\n  --flatify__loading-dot-height: 0.5em;\n  --flatify__loading-dot-animation-start-scale: 0;\n  --flatify__loading-dot-animation-duration: 0.75s;\n}\n\n.my-dots-loading-2 {\n  --flatify__loading-color: #fc6e51;\n  --flatify__loading-dot-width: 0.5em;\n  --flatify__loading-dot-height: 2em;\n  --flatify__loading-dot-animation-start-scale: 2;\n  --flatify__loading-dot-animation-duration: 2s;\n}\n\n/* Custom spinner loadings */\n.my-spinner-loading-1 {\n  --flatify__loading-color: #6a50a7;\n  --flatify__loading-spinner-animation-duration: 2s;\n}\n\n.my-spinner-loading-2 {\n  --flatify__loading-color: #aa8e69;\n  --flatify__loading-spinner-animation-duration: 0.35s;\n}\n")))}u.isMDXComponent=!0}}]);