{"id":285673,"date":"2017-04-28T14:01:42","date_gmt":"2017-04-28T10:01:42","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=285673"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=285673","title":{"rendered":"\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043b\u044f React"},"content":{"rendered":"<p>\u0412 \u0441\u0435\u0442\u0438 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u043b \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 CSS.<br \/>  \u041f\u0435\u0440\u0435\u043d\u0435\u0441 \u0432 React. \u041a\u0440\u0443\u0442\u0438\u0442\u0441\u044f\u2026<br \/>   <a name=\"habracut\"><\/a>  <\/p>\n<pre><code class=\"javascript\">import React from 'react';  class Loading extends React.Component { \tconstructor(props) { \t\tsuper(props); \t\tthis.style = { \t\t    margin: '10% auto', \t\t    borderBottom: '1px solid #8af', \t\t    borderLeft: '1px solid #8af', \t\t    borderRight: '5px solid #0af', \t\t    borderTop: '5px solid #0af', \t\t    borderRadius: '100%', \t\t    background: 'linear-gradient(rgba(199, 216, 234, 0.6) 30%, rgba(166, 195, 224, 0.9) 90%)', \t\t    height: '80px', \t\t    width: '100px', \t\t\tanimationName: 'spin', \t\t\tanimationTimingFunction: 'linear', \t\t\tanimationDuration: '2s', \t\t\tanimationDelay: '0.0s', \t\t\tanimationIterationCount: 'infinite', \t\t\tanimationDirection: 'normal', \t\t\tanimationFillMode: 'forwards' \t\t}; \t\tthis.keyframes = ` @-webkit-keyframes &quot;spin&quot;{     from{     -webkit-transform:rotate(0deg);     transform:rotate(0deg);     }     to{     -webkit-transform:rotate(359deg);     transform:rotate(359deg);     } }`; \t}  \trender() { \t\tlet styleSheet = document.styleSheets[0]; \t\tstyleSheet.insertRule(this.keyframes, styleSheet.cssRules.length); \t\treturn &lt;div style={this.style}\/&gt; \t} }  export default Loading  <\/code><\/pre>\n<p>  \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0438\u0437 \u0441\u0435\u0442\u0438:  <\/p>\n<pre><code class=\"xml\">&lt;html&gt; &lt;head&gt; &lt;META http-equiv=&quot;Content-Type&quot; content=&quot;text\/html;charset=UTF-8&quot;&gt; &lt;style&gt; div {     margin:30px;     height:100px;     width:100px;     border-radius:100%;     background:fff;     animation:spin 1.9s infinite linear;  } .loading1{     border-bottom:12px solid #8af;     border-left:12px solid #8af;     border-right:0px solid #fff;     border-top:0px solid #fff;     } .loading2{     border-bottom:5px solid #8af;     border-left:5px solid #8af;     border-right:0px solid #fff;     border-top:0px solid #fff;     background: linear-gradient(rgba(199, 216, 234, 0.6) 30%, rgba(166, 195, 224, 0.9) 90%);     } .loading3{     border-bottom:5px solid #8af;     border-left:5px solid #8af;     border-right:1px solid #fff;     border-top:1px solid #fff;     background: linear-gradient(rgba(199, 216, 234, 0.6) 30%, rgba(166, 195, 224, 0.9) 90%);     height:50px;     }   .loading4{     border-bottom:6px solid #8af;     border-left:6px solid #8af;     border-right:6px solid #fff;     border-top:6px solid #fff;     }       @keyframes &quot;spin&quot;{     from{-webkit-transform:rotate(0deg);     -moz-transform:rotate(0deg);     -o-transform:rotate(0deg);     -ms-transform:rotate(0deg);     transform:rotate(0deg);     }     to{     -webkit-transform:rotate(359deg);     -moz-transform:rotate(359deg);     -o-transform:rotate(359deg);     -ms-transform:rotate(359deg);     transform:rotate(359deg);     } } @-moz-keyframes spin{     from{     -moz-transform:rotate(0deg);     transform:rotate(0deg);     }     to{     -moz-transform:rotate(359deg);     transform:rotate(359deg);     } } @-webkit-keyframes &quot;spin&quot;{     from{     -webkit-transform:rotate(0deg);     transform:rotate(0deg);     }     to{     -webkit-transform:rotate(359deg);     transform:rotate(359deg);     } } @-ms-keyframes &quot;spin&quot;{     from{     -ms-transform:rotate(0deg);     transform:rotate(0deg);}     to{-ms-transform:rotate(359deg);     transform:rotate(359deg);     } } @-o-keyframes &quot;spin&quot;{     from{     -o-transform:rotate(0deg);     transform:rotate(0deg);     }     to{     -o-transform:rotate(359deg);     transform:rotate(359deg);     } } &lt;\/style&gt; &lt;\/head&gt; &lt;body&gt; &lt;div class=&quot;loading1&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;loading2&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;loading3&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;loading4&quot;&gt;&lt;\/div&gt; &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/327558\/\"> https:\/\/habrahabr.ru\/post\/327558\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u0441\u0435\u0442\u0438 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u043b \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 CSS.<br \/>  \u041f\u0435\u0440\u0435\u043d\u0435\u0441 \u0432 React. \u041a\u0440\u0443\u0442\u0438\u0442\u0441\u044f\u2026   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-285673","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=285673"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285673\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=285673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=285673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=285673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}