GitHub<\/a><\/p>\n\nSee the Pen Loading Animation by Jack Doyle (@jack-doyle) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
This is cool loading animation using pure CSS. Designed by Jack Doyle.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[16439113,30305495],"class_list":["post-129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-loading-animation","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-loading-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":10889,"url":"https:\/\/codemyui.com\/pure-css-potion-loading-animation\/","url_meta":{"origin":129,"position":0},"title":"Pure CSS Potion Loading Animation","author":"Hima Vincent","date":"February 24, 2017","format":false,"excerpt":"This is a pure CSS loading animation that looks like potion filling up in a test tube. It was designed by Michael Mangialardi. If you are having trouble with the pen, try the archived copy on GitHub Potion Loader Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Pure CSS Potion Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/pure-css-potion-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/pure-css-potion-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/pure-css-potion-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/pure-css-potion-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":96,"url":"https:\/\/codemyui.com\/pure-css-bookshelf-loading-animation\/","url_meta":{"origin":129,"position":1},"title":"Pure CSS Bookshelf Loading Animation","author":"Hima Vincent","date":"November 8, 2015","format":false,"excerpt":"Nice little loading animation using pure CSS. This animation shows a stack of folders or books falling over and is perfect for libraries or book club related websites. Designed by Antoine Gr\u00e9lard. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Pure CSS Bookshelf Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-bookshelf-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-bookshelf-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-bookshelf-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/pure-css-bookshelf-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24989,"url":"https:\/\/codemyui.com\/pure-css-gradient-colour-slide-puzzle-style-loading-animation\/","url_meta":{"origin":129,"position":2},"title":"Pure CSS Gradient Colour Slide Puzzle Style Loading Animation","author":"Hima Vincent","date":"November 13, 2017","format":false,"excerpt":"This pure CSS gradient loading animation was designed by Andreas Hjortland it feels like a slider puzzle, there is a colourful version of this too. If you are having trouble with the pen, try the archived copy on GitHub Gradient Colour Slide Puzzle Style Loading Animation Snippet","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"Pure CSS Gradient Colour Slide Puzzle Style Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/gradient-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12568,"url":"https:\/\/codemyui.com\/spinning-loading-animation-css\/","url_meta":{"origin":129,"position":3},"title":"Spinning Loading Animation in CSS","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"A simple loading animation in Pure CSS designed by Tyson Matanich. A radar-like spinning animation that will go well on any pages where you want to show a loading animation. If you are having trouble with the pen, try the archived copy on GitHub Spinning Loading Animation Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Spinning Loading Animation in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24978,"url":"https:\/\/codemyui.com\/pure-css-solid-colour-slide-puzzle-style-loading-animation\/","url_meta":{"origin":129,"position":4},"title":"Pure CSS Solid Colour Slide Puzzle Style Loading Animation","author":"Hima Vincent","date":"November 9, 2017","format":false,"excerpt":"With this loader animation, which is done in pure CSS you can see that it looks like a slider puzzle with multiple squares moving in and out trying to solve the puzzle. This code snippet was designed by Andreas Hjortland. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Solid Colour Slide Puzzle Style Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/solid-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/solid-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/solid-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/solid-colour-slide-puzzle-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":908,"url":"https:\/\/codemyui.com\/octagram-star-loading-animation\/","url_meta":{"origin":129,"position":5},"title":"Octagram Star and Other Loading Animations","author":"Hima Vincent","date":"June 24, 2016","format":false,"excerpt":"A bunch of preloaders that you can use on pages that need to show a loading animation to visitors while the content loads in the background. All these are in pure CSS no javascript required!! The various options include a spinning octagram star, 3 dot loader, 3 line wave, an\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Octagram Star and Other Loading Animations","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/octagram-star-and-other-loading-animations.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":26235,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/129\/revisions\/26235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/720"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}