{"id":19166,"date":"2023-04-24T06:32:34","date_gmt":"2023-04-24T03:02:34","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement-272a\/"},"modified":"2023-04-24T06:32:34","modified_gmt":"2023-04-24T03:02:34","slug":"creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement-272a","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement-272a\/","title":{"rendered":"\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 CSS \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631"},"content":{"rendered":"<div data-article-id=\"1445613\" id=\"article-body\">\n<p>\u0646\u0648\u0627\u0631\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u062e\u0648\u062f \u062f\u0631 \u062d\u06cc\u0646 \u062d\u0631\u06a9\u062a \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0637\u0648\u0644\u0627\u0646\u06cc \u0627\u0633\u062a.  \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0645\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc HTML \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0631\u0627 \u0645\u0648\u0631\u062f \u0628\u062d\u062b \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u0648 \u0633\u067e\u0633 \u0628\u0647 \u06a9\u062f CSS \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0632\u0646\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0648 \u0646\u06a9\u0627\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0645\u0648\u062b\u0631 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0648\u0628 \u0633\u0627\u06cc\u062a \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f\u060c \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement-272a\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B9%D9%84%D8%A7%D9%85%D8%AA_%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_HTML_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc HTML \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/creating-an-interactive-scroll-page-progress-bar-with-css-to-enhance-user-engagement-272a\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7%DB%8C_CSS\" >\u0645\u0631\u062d\u0644\u0647 2: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0633\u0628\u06a9 \u0647\u0627\u06cc CSS<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%B9%D9%84%D8%A7%D9%85%D8%AA_%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_HTML_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc HTML \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc HTML \u0628\u0631\u0627\u06cc \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u062a\u0639\u0627\u0645\u0644\u06cc \u062e\u0648\u062f \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>&lt;!-- tb is acronym for TechieBundle --&gt;\n&lt;div class=\"tb-container-bar\"&gt;\n  &lt;div class=\"tb-progress-bar\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div class=\"tb-wrapper\"&gt;\n  &lt;header&gt;\n    &lt;div class=\"tb-container\"&gt;\n      &lt;a href=\"https:\/\/techiebundle.com\"&gt;\n        &lt;img src=\"https:\/\/techiebundle.com\/wp-content\/uploads\/2022\/12\/techiebundle-white-1-1.png\" alt=\"Web Development Agency | TechieBundle\" height=\"60\" target=\"_blank\"&gt;\n      &lt;\/a&gt;\n      &lt;div class=\"nav navigation-wrapper\"&gt;\n        &lt;ul class=\"nav-list\"&gt;\n          &lt;li class=\"nav-link\"&gt;Home&lt;\/li&gt;\n          &lt;li class=\"nav-link\"&gt;About&lt;\/li&gt;\n          &lt;li class=\"nav-link\"&gt;Portfolio&lt;\/li&gt;\n          &lt;li class=\"nav-link\"&gt;Blog&lt;\/li&gt;\n          &lt;li class=\"nav-link\"&gt;Contact&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/header&gt;\n\n  &lt;div class=\"tb-container tb-margin-top\"&gt;\n    &lt;h1&gt;Scroll Page Progress Bar with CSS (Scroll Down)&lt;\/h1&gt;\n    &lt;p&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo commodi nesciunt maiores saepe? Repellat at quia dignissimos nobis, vitae cumque delectus dolorem totam cum. Voluptas quos delectus fuga dicta accusamus.\n    &lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex earum doloribus quasi atque? Voluptatem rem maiores, reiciendis doloremque fuga earum quia, quis laboriosam minima natus, in sunt debitis repellat consequuntur?&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ipsa sed tempora in aperiam autem quidem rem alias ratione! Rem debitis reiciendis aliquid mollitia deleniti. Hic reprehenderit aliquid nisi officiis!&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, dolor repellat! Iure ratione perspiciatis officia illo provident dignissimos earum sunt, natus adipisci dolorum saepe corrupti rerum aliquam ex vel. Voluptas!&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aut ipsa, optio voluptatem doloremque in labore facere, dignissimos, laudantium voluptas rem molestiae iure hic alias sunt. Sequi rem error corrupti!&lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?\n    &lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.&lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?\n    &lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.&lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?\n    &lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.&lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi deleniti consequatur, similique odio hic, saepe iste repellendus dolorum odit cum quae, ipsum dolore reprehenderit exercitationem temporibus illo quisquam modi dolor?\n    &lt;\/p&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repellendus, magnam voluptatem minima deleniti sint id. Voluptates est, laudantium deserunt, minus ex assumenda culpa cumque porro tempore doloribus quisquam consequatur.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit quis molestiae illo hic facere ratione velit sequi eum, inventore nesciunt dicta aliquid totam necessitatibus culpa iste autem expedita saepe vero.&lt;\/p&gt;\n\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ab officiis odit culpa vel! Temporibus, labore magnam alias sunt sint culpa, porro inventore pariatur modi explicabo omnis perspiciatis esse ipsa.&lt;\/p&gt;\n    &lt;br&gt;\n  &lt;\/div&gt;\n  &lt;br&gt;\n  &lt;br&gt;\n&lt;\/div&gt;\n&lt;footer&gt;\n  &lt;div class=\"copyright\"&gt;\n    \u00a9 2023 &lt;a href=\"https:\/\/techiebundle.com\" target=\"_blank\"&gt;TechieBundle&lt;\/a&gt;. &lt;\/div&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%B3%D8%A8%DA%A9_%D9%87%D8%A7%DB%8C_CSS\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0633\u0628\u06a9 \u0647\u0627\u06cc CSS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0627\u06cc\u062f \u0633\u0628\u06a9 \u0647\u0627\u06cc CSS \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0638\u0627\u0647\u0631 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u062a\u0639\u0627\u0645\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>@import url(\"https:\/\/fonts.googleapis.com\/css?family=Asap|Playfair+Display+SC:900&amp;display=swap\");\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@200;400;500;600;700;900&amp;display=swap\");\n\nhtml,\nbody {\n  position: relative;\n  height: auto;\n  background: #fcfcfc;\n  line-height: 180%;\n  font-family: \"Nunito\", sans serif;\n}\np {\n  color: #474747;\n  font-size: 14px;\n}\nh1{\n  text-align:center;\n}\n.tb-margin-top {\n  padding-top: 8em;\n}\n.tb-wrapper {\n  position: relative;\n  overflow: hidden;\n  z-index: 3;\n}\n.tb-container {\n  max-width: 920px;\n  margin: 0 auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n.tb-container &gt; a &gt; img {\n  border-radius: 50%;\n}\nheader &gt; div {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 90px;\n}\nheader {\n  position: fixed;\n  top: 0;\n  width: 100%;\n  background: #fcfcfc;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n.tb-container-bar:before {\n  position: fixed;\n  content: \"\";\n  display: block;\n  z-index: 2;\n  border-left: 100vw solid white;\n  border-right: 100vw solid white;\n  border-bottom: calc(100vh - 92px) solid white;\n  bottom: 0;\n}\n.tb-progress-bar {\n  position: absolute;\n  top: 92px;\n  width: 100%;\n  height: 100%;\n  background-image: url(https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/e0\/Black_right_angled_triangle_2.png);\n  background-repeat: no-repeat;\n  background-attachment: scroll, fixed;\n  background-size: 100% calc(100% - (100vh - 91px));\n  z-index: 1;\n}\nfooter {\n  position: absolute;\n  height: auto;\n  width: 100%;\n  background-color: #fcfcfc;\n  text-align: center;\n  line-height: 90px;\n  z-index: 2;\n  letter-spacing: 4px;\n  bottom: -120px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\nfooter &gt; .copywrite {\n  letter-spacing: 1px;\n}\n.navigation-wrapper &gt; ul {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 2em;\n}\n.navigation-wrapper &gt; ul &gt; li {\n  color: #474747;\n  font-size: 1.25em;\n  list-style: none;\n  cursor: pointer;\n  position: relative;\n  font-weight: 500;\n}\n.navigation-wrapper &gt; ul &gt; li:hover::before {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  height: 0;\n  width: 0;\n  z-index: 1;\n  border-bottom: 2px solid #474747;\n  animation: border-move 0.5s linear;\n  animation-fill-mode: forwards;\n}\n@keyframes border-move {\n  100% {\n    width: 100%;\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062e\u0648\u0627\u0647\u0634 \u0645\u06cc\u06a9\u0646\u0645!  \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u06a9\u0647 \u06a9\u0645\u06a9\u06cc \u06a9\u0631\u062f\u0647 \u0627\u0645  \u0627\u06af\u0631 \u0633\u0624\u0627\u0644 \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u06cc\u062f \u06cc\u0627 \u0628\u0647 \u06a9\u0645\u06a9 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f\u060c \u062f\u0631\u06cc\u063a \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u067e\u0631\u0633\u06cc\u062f \u06cc\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646 \u067e\u06cc\u0648\u0646\u062f \u0628\u0631\u0627\u06cc \u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0632\u0646\u062f\u0647 \u0628\u0631\u0648\u06cc\u062f:<br \/>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u06af\u06cc\u0631 \u06a9\u0646\u06cc\u062f: \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0686\u0634\u0645 \u0646\u0648\u0627\u0632 \u0628\u0627 CSS \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0646\u0648\u0627\u0631\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u062e\u0648\u062f \u062f\u0631 \u062d\u06cc\u0646 \u062d\u0631\u06a9\u062a \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0637\u0648\u0644\u0627\u0646\u06cc \u0627\u0633\u062a. \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0635\u0641\u062d\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0644\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0646\u0648\u0627\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":19167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-19166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/19166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=19166"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/19166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/19167"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=19166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=19166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=19166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}