{"id":24996,"date":"2017-11-13T22:39:21","date_gmt":"2017-11-13T12:39:21","guid":{"rendered":"https:\/\/codemyui.com\/?p=24996"},"modified":"2018-05-16T16:35:28","modified_gmt":"2018-05-16T06:35:28","slug":"lego-style-loading-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/lego-style-loading-animation\/","title":{"rendered":"Lego Style Loading Animation"},"content":{"rendered":"<p>This lego inspired loading animation designed by <a href=\"https:\/\/twitter.com\/chrisgannon\" target=\"_blank\" rel=\"noopener\">Chris Gannon<\/a> shows a bunch of lego blocks moving around. <\/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\/13ce97bb6bf2bb4531613cda2a0ca4aa\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Lego Style Loading Animation Snippet<\/h2>\n<p class='codepen'  data-height='479' data-theme-id='0' data-slug-hash='yXmbMg' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen LEGO Loader by Chris Gannon (@chrisgannon) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This lego inspired loading animation designed by Chris Gannon shows a bunch of lego blocks moving around.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/lego-style-loading-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24997,"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":true,"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":[59500,16439113],"class_list":["post-24996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-deconstruction","tag-loading-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/lego-style-loading-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":27030,"url":"https:\/\/codemyui.com\/rotating-pizza-slice-preloader\/","url_meta":{"origin":24996,"position":0},"title":"Rotating Pizza Slice Preloader","author":"Saijo George","date":"January 8, 2019","format":false,"excerpt":"In this SVG preloader, you have a slice of pizza that keeps spinning and it will look perfect on food-related websites. Designed using GSAP by Chris Gannon. If you are having trouble with the pen, try the archived copy on GitHub Pizza Spinning Loader Snippet","rel":"","context":"In \"food inspired\"","block_context":{"text":"food inspired","link":"https:\/\/codemyui.com\/tag\/food-inspired\/"},"img":{"alt_text":"Rotating Pizza Slice Preloader","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Rotating-Pizza-Slice-Preloader.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Rotating-Pizza-Slice-Preloader.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Rotating-Pizza-Slice-Preloader.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Rotating-Pizza-Slice-Preloader.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25458,"url":"https:\/\/codemyui.com\/fried-egg-loader\/","url_meta":{"origin":24996,"position":1},"title":"Fried Egg Loader","author":"Saijo George","date":"February 16, 2018","format":false,"excerpt":"We have another food inspired design for you all today, this one was designed by Chris Gannon. We have multiple fried eggs appearing one after the other indicating a loader in action. If you are having trouble with the pen, try the archived copy on GitHub Egg Loader Snippet","rel":"","context":"In \"food inspired\"","block_context":{"text":"food inspired","link":"https:\/\/codemyui.com\/tag\/food-inspired\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/fried-egg-loader.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]},{"id":25018,"url":"https:\/\/codemyui.com\/sushi-style-toggle-button\/","url_meta":{"origin":24996,"position":2},"title":"Sushi Style Toggle Button","author":"Hima Vincent","date":"November 9, 2017","format":false,"excerpt":"A really cute cartoon style sushi toggle switch, on click it changes from a salmon sushi to a cucumber sushi.It was designed by Chris Gannon. If you are having trouble with the pen, try the archived copy on GitHub Sushi Toggle Button Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Sushi Style Toggle Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/sushi-style-toggle-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\/11\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/sushi-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4550,"url":"https:\/\/codemyui.com\/merry-christmas-svg-text-animation\/","url_meta":{"origin":24996,"position":3},"title":"Merry Christmas SVG Text Animation","author":"Hima Vincent","date":"November 25, 2016","format":false,"excerpt":"This is a text animation where a swooping sign comes in and says Merry Christmas on a red background. This is really great when you want to add some Merry Christmas related messages during the Christmas time. Designed by Chris Gannon. If you are having trouble with the pen, try\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/merry-christmas.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/merry-christmas.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/merry-christmas.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/merry-christmas.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29478,"url":"https:\/\/codemyui.com\/seeasaw-style-toggle-button\/","url_meta":{"origin":24996,"position":4},"title":"Seeasaw style toggle button","author":"Saijo George","date":"February 17, 2020","format":false,"excerpt":"This is a very simple but elegant toggle button design by Chris Gannon. It looks like a seesaw and when you toggle it it slides to the active direction. If you are having trouble with the pen, try the archived copy on GitHub Seesaw Tilt Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Seeasaw style toggle button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Seeasaw-style-toggle-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1414,"url":"https:\/\/codemyui.com\/balloon-range-slider-svg\/","url_meta":{"origin":24996,"position":5},"title":"Balloon Range Slider in SVG","author":"Hima Vincent","date":"August 5, 2016","format":false,"excerpt":"If you an awesome looking range slider, NOT to be confused with image sliders then this is something that you will love. Designed by Chris Gannon, this range slider offers a smooth animation when you click and hold on the slider a balloon pops out showing the slider range anywhere\u2026","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Balloon Range Slider in SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/balloon-range-slider-in-svg.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\/24996","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=24996"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24996\/revisions"}],"predecessor-version":[{"id":25670,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24996\/revisions\/25670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24997"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}