{"id":1437,"date":"2023-05-17T10:40:00","date_gmt":"2023-05-17T07:40:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1437"},"modified":"2023-05-15T10:16:02","modified_gmt":"2023-05-15T07:16:02","slug":"longcat-spinner","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/loader\/1437\/","title":{"rendered":"Longcat Spinner"},"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=\"701\" height=\"338\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/peek-2023-05-14-15-40.gif\" alt=\"Longcat Spinner\" class=\"wp-image-1438 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;cat&quot;&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;cat__segment&quot;&gt;&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;}\">* {\n\tborder: 0;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n  }\n  \n  body {\n\tbackground: #2c4763;\n\tdisplay: flex;\n\tfont-size: calc(16px + (20 - 16) * (100vw - 320px) \/ (1280 - 320));\n\theight: 100vh;\n\tline-height: 1.5;\n  }\n  \n  .cat {\n\tmargin: auto;\n\tposition: relative;\n\twidth: 16em;\n\theight: 16em;\n  }\n  .cat__segment {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\twidth: 3em;\n\theight: 2em;\n\ttransform: translate(-50%, -50%);\n  }\n  .cat__segment:before {\n\tanimation: loop 2s cubic-bezier(0.6, 0, 0.4, 1) infinite running;\n\tbackground: linear-gradient(90deg, white 20%, #e6e6e6 20% 80%, white 80%);\n\tborder-radius: 0.25em;\n\tcontent: &quot;&quot;;\n\tdisplay: block;\n\twill-change: transform;\n\twidth: 100%;\n\theight: 100%;\n  }\n  .cat__segment:first-of-type {\n\twidth: 4em;\n\theight: 4em;\n\tz-index: 1;\n  }\n  .cat__segment:first-of-type:before {\n\tbackground: radial-gradient(0.25em 0.25em at 1.25em 1.6em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(0.75em 0.75em at 1.25em 1.75em, #1a1a1a 48%, rgba(26, 26, 26, 0) 50%), radial-gradient(0.25em 0.25em at 2.75em 1.6em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(0.75em 0.75em at 2.75em 1.75em, #1a1a1a 48%, rgba(26, 26, 26, 0) 50%), radial-gradient(0.9em 0.8em at 1.5em 2.65em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(0.9em 0.8em at 2.5em 2.65em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 0.8em at 1.6em 2.75em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(1em 0.8em at 2.4em 2.75em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(0.75em 0.75em at 50% 2.5em, #e69999 48%, rgba(230, 153, 153, 0) 50%), radial-gradient(4em 3em at 50% 2em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(4em 3em at 50% 2.2em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(1em 3em at 0.75em 1.5em, #e69999 39%, white 40% 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 3em at 3.25em 1.5em, #e69999 39%, white 40% 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 2em at 0.5em 2.8em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 2em at 0.5em 3em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(1em 2em at 3.5em 2.8em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 2em at 3.5em 3em, #cccccc 48%, rgba(204, 204, 204, 0) 50%);\n\tbackground-repeat: no-repeat;\n  }\n  .cat__segment:last-of-type {\n\twidth: 3em;\n\theight: 4em;\n  }\n  .cat__segment:last-of-type:before {\n\tbackground: linear-gradient(90deg, white 20%, #e6e6e6 20% 80%, white 80%) 0 1.5em\/3em 0.5em, radial-gradient(3em 2em at top center, #e6e6e6 30%, white 31% 48%, rgba(255, 255, 255, 0) 50%) 0 2em\/3em 2em, radial-gradient(1em 4em at 0.5em 0, white 48%, rgba(255, 255, 255, 0) 50%) 0 2em\/3em 2em, radial-gradient(1em 4em at 2.5em 0, white 48%, rgba(255, 255, 255, 0) 50%) 0 2em\/3em 2em;\n\tbackground-repeat: no-repeat;\n  }\n  .cat__segment:nth-of-type(1) {\n\ttransform: translate(-50%, -50%) rotate(-20deg);\n  }\n  .cat__segment:nth-of-type(1):before {\n\tanimation-delay: 0s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(2) {\n\ttransform: translate(-50%, -50%) rotate(-18.6666666667deg);\n  }\n  .cat__segment:nth-of-type(2):before {\n\tanimation-delay: 0.02s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(3) {\n\ttransform: translate(-50%, -50%) rotate(-17.3333333333deg);\n  }\n  .cat__segment:nth-of-type(3):before {\n\tanimation-delay: 0.04s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(4) {\n\ttransform: translate(-50%, -50%) rotate(-16deg);\n  }\n  .cat__segment:nth-of-type(4):before {\n\tanimation-delay: 0.06s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(5) {\n\ttransform: translate(-50%, -50%) rotate(-14.6666666667deg);\n  }\n  .cat__segment:nth-of-type(5):before {\n\tanimation-delay: 0.08s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(6) {\n\ttransform: translate(-50%, -50%) rotate(-13.3333333333deg);\n  }\n  .cat__segment:nth-of-type(6):before {\n\tanimation-delay: 0.1s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(7) {\n\ttransform: translate(-50%, -50%) rotate(-12deg);\n  }\n  .cat__segment:nth-of-type(7):before {\n\tanimation-delay: 0.12s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(8) {\n\ttransform: translate(-50%, -50%) rotate(-10.6666666667deg);\n  }\n  .cat__segment:nth-of-type(8):before {\n\tanimation-delay: 0.14s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(9) {\n\ttransform: translate(-50%, -50%) rotate(-9.3333333333deg);\n  }\n  .cat__segment:nth-of-type(9):before {\n\tanimation-delay: 0.16s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(10) {\n\ttransform: translate(-50%, -50%) rotate(-8deg);\n  }\n  .cat__segment:nth-of-type(10):before {\n\tanimation-delay: 0.18s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(11) {\n\ttransform: translate(-50%, -50%) rotate(-6.6666666667deg);\n  }\n  .cat__segment:nth-of-type(11):before {\n\tanimation-delay: 0.2s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(12) {\n\ttransform: translate(-50%, -50%) rotate(-5.3333333333deg);\n  }\n  .cat__segment:nth-of-type(12):before {\n\tanimation-delay: 0.22s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(13) {\n\ttransform: translate(-50%, -50%) rotate(-4deg);\n  }\n  .cat__segment:nth-of-type(13):before {\n\tanimation-delay: 0.24s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(14) {\n\ttransform: translate(-50%, -50%) rotate(-2.6666666667deg);\n  }\n  .cat__segment:nth-of-type(14):before {\n\tanimation-delay: 0.26s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(15) {\n\ttransform: translate(-50%, -50%) rotate(-1.3333333333deg);\n  }\n  .cat__segment:nth-of-type(15):before {\n\tanimation-delay: 0.28s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(16) {\n\ttransform: translate(-50%, -50%) rotate(0deg);\n  }\n  .cat__segment:nth-of-type(16):before {\n\tanimation-delay: 0.3s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(17) {\n\ttransform: translate(-50%, -50%) rotate(1.3333333333deg);\n  }\n  .cat__segment:nth-of-type(17):before {\n\tanimation-delay: 0.32s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(18) {\n\ttransform: translate(-50%, -50%) rotate(2.6666666667deg);\n  }\n  .cat__segment:nth-of-type(18):before {\n\tanimation-delay: 0.34s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(19) {\n\ttransform: translate(-50%, -50%) rotate(4deg);\n  }\n  .cat__segment:nth-of-type(19):before {\n\tanimation-delay: 0.36s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(20) {\n\ttransform: translate(-50%, -50%) rotate(5.3333333333deg);\n  }\n  .cat__segment:nth-of-type(20):before {\n\tanimation-delay: 0.38s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(21) {\n\ttransform: translate(-50%, -50%) rotate(6.6666666667deg);\n  }\n  .cat__segment:nth-of-type(21):before {\n\tanimation-delay: 0.4s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(22) {\n\ttransform: translate(-50%, -50%) rotate(8deg);\n  }\n  .cat__segment:nth-of-type(22):before {\n\tanimation-delay: 0.42s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(23) {\n\ttransform: translate(-50%, -50%) rotate(9.3333333333deg);\n  }\n  .cat__segment:nth-of-type(23):before {\n\tanimation-delay: 0.44s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(24) {\n\ttransform: translate(-50%, -50%) rotate(10.6666666667deg);\n  }\n  .cat__segment:nth-of-type(24):before {\n\tanimation-delay: 0.46s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(25) {\n\ttransform: translate(-50%, -50%) rotate(12deg);\n  }\n  .cat__segment:nth-of-type(25):before {\n\tanimation-delay: 0.48s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(26) {\n\ttransform: translate(-50%, -50%) rotate(13.3333333333deg);\n  }\n  .cat__segment:nth-of-type(26):before {\n\tanimation-delay: 0.5s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(27) {\n\ttransform: translate(-50%, -50%) rotate(14.6666666667deg);\n  }\n  .cat__segment:nth-of-type(27):before {\n\tanimation-delay: 0.52s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(28) {\n\ttransform: translate(-50%, -50%) rotate(16deg);\n  }\n  .cat__segment:nth-of-type(28):before {\n\tanimation-delay: 0.54s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(29) {\n\ttransform: translate(-50%, -50%) rotate(17.3333333333deg);\n  }\n  .cat__segment:nth-of-type(29):before {\n\tanimation-delay: 0.56s;\n\ttransform: translateX(6em);\n  }\n  .cat__segment:nth-of-type(30) {\n\ttransform: translate(-50%, -50%) rotate(18.6666666667deg);\n  }\n  .cat__segment:nth-of-type(30):before {\n\tanimation-delay: 0.58s;\n\ttransform: translateX(6em);\n  }\n  \n  @keyframes loop {\n\tfrom {\n\t  transform: rotate(0) translateX(6em);\n\t}\n\tto {\n\t  transform: rotate(-1turn) translateX(6em);\n\t}\n  }<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1438,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[16],"class_list":["post-1437","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\/1437","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=1437"}],"version-history":[{"count":2,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1437\/revisions"}],"predecessor-version":[{"id":1440,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1437\/revisions\/1440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1438"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}