"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", div: "div", h1: "h1", h3: "h3", iframe: "iframe", p: "p", path: "path", pre: "pre", span: "span", svg: "svg", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "улучшение-лоадера-для-первоначальной-загрузки", children: [_jsx(_components.a, { className: "heading-link", href: "#улучшение-лоадера-для-первоначальной-загрузки", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "улучшение Лоадера для первоначальной загрузки"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://t.me/flutterflow_rus/24030/52947", target: "_blank", rel: "noopener noreferrer", children: "от Victor" }), "\nКогда Веб-приложение стартует и вы ожидаете загрузки - гораздо более приятно смотреть на Красивый информативный лоадер, чем на белый экран :)"] }), "\n", _jsxs(_components.p, { children: ["Шаг 1. Выбираем загрузочную анимацию здесь ", _jsx(_components.a, { href: "https://loading.io/", target: "_blank", rel: "noopener noreferrer", children: "https://loading.io/" }), "\nШаг 2. Вставляем код ниже в Ваш Header в разделе настроек"] }), "\n", _jsxs(_components.h3, { id: "код", children: [_jsx(_components.a, { className: "heading-link", href: "#код", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Код"] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "rel" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "manifest", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "manifest.json", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "style"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".splash-screen" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "flex-direction" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "justify-content" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "align-items" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " fixed", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "top" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "left" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "background-color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#ffffff" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "z-index" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "9999" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".app-name" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "margin-top" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "font-family" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'Arial'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " sans-serif", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "font-size" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "18" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "color" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#00000" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "letter-spacing" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "text-transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " uppercase", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " \n" }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token comment", children: "/* Стили для Eclipse-анимации */" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsxs(_components.span, { className: "token atrule", children: [_jsx(_components.span, { className: "token rule", children: "@keyframes" }), " ldio-x2uulkbinbj"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "0%" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rotate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token unit", children: "deg" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "50%" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rotate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "180" }), _jsx(_components.span, { className: "token unit", children: "deg" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: "100%" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rotate" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "360" }), _jsx(_components.span, { className: "token unit", children: "deg" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".ldio-x2uulkbinbj" }), " div"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " absolute", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "animation" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ldio-x2uulkbinbj ", _jsx(_components.span, { className: "token number", children: "0.76" }), _jsx(_components.span, { className: "token unit", children: "s" }), " linear infinite", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "140" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "140" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "top" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "left" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "border-radius" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "50" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "box-shadow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "9.8" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token hexcode color", children: "#0079c1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transform-origin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "70" }), _jsx(_components.span, { className: "token unit", children: "px" }), " ", _jsx(_components.span, { className: "token number", children: "74.9" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".loadingio-spinner-eclipse-nq4q5u6dq7r" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "200" }), _jsx(_components.span, { className: "token unit", children: "px" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "display" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " inline-block", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "overflow" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " hidden", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "background" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token color", children: "transparent" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "/* Изменено с #ffffff на transparent */" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token selector", children: _jsx(_components.span, { className: "token class", children: ".ldio-x2uulkbinbj" }) }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "width" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "height" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token unit", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "position" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " relative", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transform" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "translateZ" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token function", children: "scale" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "backface-visibility" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " hidden", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token property", children: "transform-origin" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token style", children: _jsxs(_components.span, { className: "token language-css", children: [" ", _jsxs(_components.span, { className: "token selector", children: [_jsx(_components.span, { className: "token class", children: ".ldio-x2uulkbinbj" }), " div"] }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token property", children: "box-sizing" }), _jsx(_components.span, { className: "token punctuation", children: ":" }), " content-box", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token style", children: _jsx(_components.span, { className: "token language-css", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "splash-screen", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "splash-screen", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "loadingio-spinner-eclipse-nq4q5u6dq7r", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "ldio-x2uulkbinbj", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "app-name", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Загружаем приложение.. ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'flutter-first-frame'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " splashScreen ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token dom variable", children: "document" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'splash-screen'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "splashScreen", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" splashScreen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "opacity" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'0'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" splashScreen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "style" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "transition" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'opacity 0.5s ease'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token function", children: "setTimeout" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" splashScreen", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "remove" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "500" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: "\n" }) })] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "flutter_bootstrap_js", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }) }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token script", children: _jsx(_components.span, { className: "token language-javascript", children: " " }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] })] }) }), "\n", _jsxs(_components.h1, { id: "улучшение-лоадера-для-таблиц", children: [_jsx(_components.a, { className: "heading-link", href: "#улучшение-лоадера-для-таблиц", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "улучшение Лоадера для таблиц"] }), "\n", _jsx(_components.div, { style: { position: "relative", paddingBottom: "56.25%" }, children: _jsx(_components.iframe, { style: { position: "absolute", top: "0", left: "0", width: "100%", height: "100%" }, src: "https://www.youtube.com/embed/FmbogF7TzIs", allowFullScreen: true, frameBorder: "0", allow: "accelerometer autoplay clipboard-write encrypted-media gyroscope picture-in-picture" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };