{"id":403,"date":"2020-02-14T13:55:03","date_gmt":"2020-02-14T05:55:03","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=403"},"modified":"2020-02-14T13:55:03","modified_gmt":"2020-02-14T05:55:03","slug":"loading-animation","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/14\/loading-animation\/","title":{"rendered":"loading animation"},"content":{"rendered":"<p><a href=\"http:\/\/show.cqdefxxx.com\/loading%20animation\/\" target=\"_blank\"  rel=\"nofollow\" >\u5c55\u793a\u5730\u5740\uff1ahttp:\/\/show.cqdefxxx.com\/loading%20animation\/<\/a><\/p>\n<pre class=\"pure-highlightjs\"><code class=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\t&lt;head&gt;\n\t\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;title&gt;Loading&lt;\/title&gt;\n        &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n    &lt;div class=\"loading\"&gt;\n        &lt;span&gt;Loading...&lt;\/span&gt;        \n    &lt;\/div&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>style.css<\/p>\n<pre class=\"pure-highlightjs\"><code class=\"\">body{\n    margin:0;\n    padding:0;\n    background: #34495e;\n    height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: \"montserrat\",sans-serif;\n}\n\n.loading{\n    width:200px;\n    height:200px;\n    box-sizing: border-box;\n    border-radius: 50%;\n    border-top:10px solid #9b4400;   \n    position: relative;\n    animation:loading 2s linear infinite;\n}\n\n.loading:before,.loading:after{\n    content: \"\";\n    width:200px;\n    height:200px;\n    position: absolute;\n    left: 0;\n    top: -10px;\n    box-sizing: border-box;\n    border-radius: 50%;    \n}\n\n.loading:before{\n    border-top: 10px solid #ff8c31;\n    transform:rotate(120deg);\n}\n\n.loading:after{\n    border-top: 10px solid #70f3ff;\n    transform:rotate(240deg);\n}\n\n.loading span{\n    position: absolute;\n    width:200px;\n    height:200px;\n    color:#fff;\n    text-align: center;\n    line-height: 200px;\n    animation:loadingspan 2s linear infinite;\n}\n\n@keyframes loading{\n    to{\n        transform: rotate(360deg);\n    }\n}\n@keyframes loadingspan{\n    to{\n        transform: rotate(-360deg);\n    }\n}<\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5c55\u793a\u5730\u5740\uff1ahttp:\/\/show.cqdefxxx.com\/loading%20animation\/ &lt;!DOCTYPE h &#8230;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[3],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/403"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}