{"id":9465,"date":"2018-12-03T07:11:21","date_gmt":"2018-12-03T07:11:21","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=9465"},"modified":"2020-10-13T07:25:24","modified_gmt":"2020-10-13T07:25:24","slug":"grid-loading-animations","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/grid-loading-animations\/","title":{"rendered":"GRID LOADING ANIMATIONS"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Author:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li>Mary Lou<\/li>\n<li class=\".last-child\"><time>April 11, 2017<\/time><\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-link\"><\/div>\n<div class=\"info info-frontend\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Made with:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS \/ JavaScript<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h4 class=\"about-the-item\"><em><span style=\"text-decoration: underline;\"><strong>About the code:<\/strong><\/span><\/em><\/h4>\n<p>This is a nice and simple set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded. It is created using <strong>anime.js<\/strong>.<\/p>\n<p><span class=\"accent\"><em><strong>Compatible browsers:<\/strong><\/em>\u00a0<\/span>Chrome, Edge, Firefox, Opera, Safari<\/p>\n<p><span class=\"accent\"><em><strong>Dependencies:<\/strong><\/em>\u00a0<\/span>masonry.js<\/p>\n<a href=\"https:\/\/github.com\/codrops\/GridLoadingAnimations\/archive\/master.zip\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/tympanus.net\/Development\/GridLoadingAnimations\/\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo<\/span><\/a>\n<a href=\"https:\/\/github.com\/codrops\/GridLoadingAnimations\/\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Github Page<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Mary Lou April 11, 2017 Made with: HTML \/ CSS \/ JavaScript About the code: This is a nice and simple set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded. It is created using anime.js. Compatible browsers:\u00a0Chrome, Edge, Firefox, Opera, Safari Dependencies:\u00a0masonry.js<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":9470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2615],"tags":[2618,2617,2631,2388],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/9465"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=9465"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/9465\/revisions"}],"predecessor-version":[{"id":22808,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/9465\/revisions\/22808"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/9470"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=9465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=9465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=9465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}