{"id":1448,"date":"2023-05-16T10:54:00","date_gmt":"2023-05-16T07:54:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1448"},"modified":"2023-05-14T23:00:10","modified_gmt":"2023-05-14T20:00:10","slug":"loading","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/loader\/1448\/","title":{"rendered":"Loading"},"content":{"rendered":"<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"879\" height=\"406\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/peek-2023-05-14-21-54.gif\" alt=\"Loading\" class=\"wp-image-1449 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;div class=&quot;loading-container&quot;&gt;\n    &lt;div class=&quot;loading-text&quot;&gt;\n      &lt;span&gt;L&lt;\/span&gt;\n      &lt;span&gt;O&lt;\/span&gt;\n      &lt;span&gt;A&lt;\/span&gt;\n      &lt;span&gt;D&lt;\/span&gt;\n      &lt;span&gt;I&lt;\/span&gt;\n      &lt;span&gt;N&lt;\/span&gt;\n      &lt;span&gt;G&lt;\/span&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url(&quot;https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500&amp;display=swap&quot;);\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-image: radial-gradient(circle farthest-corner at 10% 20%, #00989b 0.1%, #005e78 94.2%);\n  background-size: 100%;\n  font-family: &quot;Montserrat&quot;, sans-serif;\n  overflow: hidden;\n}\n\n.loading-container {\n  width: 100%;\n  max-width: 520px;\n  text-align: center;\n  color: #fff;\n  position: relative;\n  margin: 0 32px;\n}\n.loading-container:before {\n  content: &quot;&quot;;\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  background-color: #fff;\n  bottom: 0;\n  left: 0;\n  border-radius: 10px;\n  -webkit-animation: movingLine 2.4s infinite ease-in-out;\n          animation: movingLine 2.4s infinite ease-in-out;\n}\n\n@-webkit-keyframes movingLine {\n  0% {\n    opacity: 0;\n    width: 0;\n  }\n  33.3%, 66% {\n    opacity: 0.8;\n    width: 100%;\n  }\n  85% {\n    width: 0;\n    left: initial;\n    right: 0;\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 0;\n  }\n}\n\n@keyframes movingLine {\n  0% {\n    opacity: 0;\n    width: 0;\n  }\n  33.3%, 66% {\n    opacity: 0.8;\n    width: 100%;\n  }\n  85% {\n    width: 0;\n    left: initial;\n    right: 0;\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    width: 0;\n  }\n}\n.loading-text {\n  font-size: 5vw;\n  line-height: 64px;\n  letter-spacing: 10px;\n  margin-bottom: 32px;\n  display: flex;\n  justify-content: space-evenly;\n}\n.loading-text span {\n  -webkit-animation: moveLetters 2.4s infinite ease-in-out;\n          animation: moveLetters 2.4s infinite ease-in-out;\n  transform: translatex(0);\n  position: relative;\n  display: inline-block;\n  opacity: 0;\n  text-shadow: 0px 2px 10px rgba(46, 74, 81, 0.3);\n}\n\n.loading-text span:nth-child(1) {\n  -webkit-animation-delay: 0.1s;\n          animation-delay: 0.1s;\n}\n\n.loading-text span:nth-child(2) {\n  -webkit-animation-delay: 0.2s;\n          animation-delay: 0.2s;\n}\n\n.loading-text span:nth-child(3) {\n  -webkit-animation-delay: 0.3s;\n          animation-delay: 0.3s;\n}\n\n.loading-text span:nth-child(4) {\n  -webkit-animation-delay: 0.4s;\n          animation-delay: 0.4s;\n}\n\n.loading-text span:nth-child(5) {\n  -webkit-animation-delay: 0.5s;\n          animation-delay: 0.5s;\n}\n\n.loading-text span:nth-child(6) {\n  -webkit-animation-delay: 0.6s;\n          animation-delay: 0.6s;\n}\n\n.loading-text span:nth-child(7) {\n  -webkit-animation-delay: 0.7s;\n          animation-delay: 0.7s;\n}\n\n@-webkit-keyframes moveLetters {\n  0% {\n    transform: translateX(-15vw);\n    opacity: 0;\n  }\n  33.3%, 66% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(15vw);\n    opacity: 0;\n  }\n}\n\n@keyframes moveLetters {\n  0% {\n    transform: translateX(-15vw);\n    opacity: 0;\n  }\n  33.3%, 66% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(15vw);\n    opacity: 0;\n  }\n}\n.socials {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  display: flex;\n  align-items: center;\n}\n\n.social-link {\n  color: #fff;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  margin-right: 12px;\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[16],"class_list":["post-1448","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-loader","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1448"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1448\/revisions"}],"predecessor-version":[{"id":1450,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1448\/revisions\/1450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1449"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}