{"id":24820,"date":"2017-10-24T22:35:32","date_gmt":"2017-10-24T12:35:32","guid":{"rendered":"https:\/\/codemyui.com\/?p=24820"},"modified":"2018-05-16T16:36:25","modified_gmt":"2018-05-16T06:36:25","slug":"newtons-cradle-loading-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/newtons-cradle-loading-animation\/","title":{"rendered":"Newton&#8217;s Cradle Loading Animation"},"content":{"rendered":"<p>Here is a Newton&#8217;s Cradle <a href=\"https:\/\/codemyui.com\/tag\/loading-animation\/\">loading animation<\/a> designed by Steven Traversi. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/0757d709b5be5fe45066c3adf73a46a5\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Newton&#8217;s Cradle Loading Animation Snippet<\/h2>\n<p class='codepen'  data-height='468' data-theme-id='0' data-slug-hash='ZXbzjK' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Newton\u2019s Cradle Loader by Steven Traversi (@straversi) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Here is a Newton&#8217;s Cradle loading animation designed by Steven Traversi.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/newtons-cradle-loading-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24821,"comment_status":"closed","ping_status":"closed","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-24820","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\/2017\/10\/newtons-cradle-loader.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":12625,"url":"https:\/\/codemyui.com\/triangle-loading-animation\/","url_meta":{"origin":24820,"position":0},"title":"Triangle Loading Animation","author":"Hima Vincent","date":"March 11, 2017","format":false,"excerpt":"A triangle loading animation that looks like campfire burning up. It was designed by Felix Rilling. If you are having trouble with the pen, try the archived copy on GitHub xxx Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Triangle Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/triangle-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\/triangle-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/triangle-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/triangle-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":23180,"url":"https:\/\/codemyui.com\/loading-text-wave-animation\/","url_meta":{"origin":24820,"position":1},"title":"Loading Text Wave Animation","author":"Hima Vincent","date":"August 14, 2017","format":false,"excerpt":"A nice loading text animation designed by AhmedElmsery in pure CSS. Each character of the word loading is displayed with a wave animation. If you are having trouble with the pen, try the archived copy on GitHub Loading Text Wave Animation Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Loading Text Wave Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/loading-text-wave-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\/08\/loading-text-wave-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/loading-text-wave-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/loading-text-wave-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24996,"url":"https:\/\/codemyui.com\/lego-style-loading-animation\/","url_meta":{"origin":24820,"position":2},"title":"Lego Style Loading Animation","author":"Hima Vincent","date":"November 13, 2017","format":false,"excerpt":"This lego inspired loading animation designed by Chris Gannon shows a bunch of lego blocks moving around. If you are having trouble with the pen, try the archived copy on GitHub Lego Style Loading Animation Snippet","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Lego Style Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/lego-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\/lego-style-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/lego-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\/lego-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":24820,"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":29653,"url":"https:\/\/codemyui.com\/dual-triangle-loading-animations\/","url_meta":{"origin":24820,"position":4},"title":"Dual Triangle Loading Animations","author":"Saijo George","date":"April 20, 2020","format":false,"excerpt":"Code by: Jon Kantner from Codepen If you are having trouble with the pen, try the archived copy on GitHub Triangle Preloaders Snippet","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Dual Triangle Loading Animations","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Dual-Triangle-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\/2020\/04\/Dual-Triangle-Loading-Animations.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Dual-Triangle-Loading-Animations.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Dual-Triangle-Loading-Animations.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13406,"url":"https:\/\/codemyui.com\/ghost-button-equaliser-loading-animation\/","url_meta":{"origin":24820,"position":5},"title":"Ghost Button to Equaliser Loading Animation","author":"Hima Vincent","date":"March 21, 2017","format":false,"excerpt":"Here is a snippet designed by Sara Bee. When you click on the ghost button it transforms into an equaliser like loading animation. If you are having trouble with the pen, try the archived copy on GitHub Button to Equalizer Animation Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Ghost Button to Equaliser Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-button.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-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/loading-button.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\/24820","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=24820"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24820\/revisions"}],"predecessor-version":[{"id":25707,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24820\/revisions\/25707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24821"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}