{"id":6100,"date":"2017-02-21T20:21:53","date_gmt":"2017-02-21T10:21:53","guid":{"rendered":"https:\/\/codemyui.com\/?p=6100"},"modified":"2018-05-16T16:59:57","modified_gmt":"2018-05-16T06:59:57","slug":"android-marshmallow-boot-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/android-marshmallow-boot-animation\/","title":{"rendered":"Android Marshmallow Boot Animation"},"content":{"rendered":"<p>This is a <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS only<\/a> <a href=\"https:\/\/codemyui.com\/tag\/deconstruction\/\">deconstruction<\/a> of the Android Marshmallow boot animation, it was designed by Ariful Islam. This could be used as a <a href=\"https:\/\/codemyui.com\/tag\/loading-animation\/\">preloader<\/a> on an Android related website. <\/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\/7d706e307206669615218b0e75e1acb0\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Android Marshmallow Boot Animation Snippet<\/h2>\n<p class='codepen'  data-height='452' data-theme-id='0' data-slug-hash='ZBbyeL' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Android Marshmallow Boot Animation by Ariful Islam (@Arif59) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a CSS only deconstruction of the Android Marshmallow boot animation, it was designed by Ariful Islam. This could be used as a preloader on an Android related website.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/android-marshmallow-boot-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":6105,"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":[59500,16439113,30305495],"class_list":["post-6100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-deconstruction","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\/02\/android-marshmallow-boot-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29901,"url":"https:\/\/codemyui.com\/swoop-in-sliced-text-animation\/","url_meta":{"origin":6100,"position":0},"title":"Swoop in Sliced Text Animation","author":"Saijo George","date":"May 26, 2020","format":false,"excerpt":"Code by: Ben Szabo from Codepen. Genius Deconstructed Intro in CSS. If you are having trouble with the pen, try the archived copy on GitHub Sliced Text Animation Snippet","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Swoop-in-Sliced-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Swoop-in-Sliced-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Swoop-in-Sliced-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/05\/Swoop-in-Sliced-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27324,"url":"https:\/\/codemyui.com\/flip-an-omelette-loading-animation-from-faasos\/","url_meta":{"origin":6100,"position":1},"title":"Flip an omelette Loading Animation from Faasos","author":"Saijo George","date":"April 17, 2019","format":false,"excerpt":"In this CSS only deconstruction of the loading animation from Faasos we have an omelette getting flipped over and over. This deconstruction was created by Madhusudhan Dollu. This will go with the rest of our food inspired web design elements. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/04\/Flip-an-omelette-Loading-Animation-from-Faasos.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/04\/Flip-an-omelette-Loading-Animation-from-Faasos.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/04\/Flip-an-omelette-Loading-Animation-from-Faasos.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/04\/Flip-an-omelette-Loading-Animation-from-Faasos.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24983,"url":"https:\/\/codemyui.com\/pure-css-netflix-style-text-animation\/","url_meta":{"origin":6100,"position":2},"title":"Pure CSS Netflix Style Text Animation","author":"Saijo George","date":"November 17, 2017","format":false,"excerpt":"Here is a text animation snippet designed by Nooray Yemon. It helps you recreate the classic Netflix intro text in your next web design projects. If you are having trouble with the pen, try the archived copy on GitHub Netflix Style Text Animation Snippet","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Pure CSS Netflix Style Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-netflix-style-text-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\/pure-css-netflix-style-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-netflix-style-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-netflix-style-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25119,"url":"https:\/\/codemyui.com\/pure-css-facebook-emoji-reactions\/","url_meta":{"origin":6100,"position":3},"title":"Pure CSS Facebook Emoji Reactions","author":"Saijo George","date":"November 17, 2017","format":false,"excerpt":"Want to recreate the Facebook emoji reactions on your webpage? Checkout these pure CSS snippet designed by Ashish Bardhan. If you are having trouble with the pen, try the archived copy on GitHub Facebook Emoji Animation Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pure CSS Facebook Emoji Reactions","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-facebook-emoji-reactions.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\/pure-css-facebook-emoji-reactions.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-facebook-emoji-reactions.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-facebook-emoji-reactions.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25384,"url":"https:\/\/codemyui.com\/nintendo-store-loading-screen\/","url_meta":{"origin":6100,"position":4},"title":"Nintendo Store Loading Screen","author":"Saijo George","date":"January 30, 2018","format":false,"excerpt":"This is a CSS only fullscreen loading animation designed by Steve Meredith, this loading effect can be seen in the Nintendo Store. If you are having trouble with the pen, try the archived copy on GitHub Nintendo Store Loading Snippet","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Nintendo Store Loading Screen","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/nintendo-store-loading-screen.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/nintendo-store-loading-screen.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/nintendo-store-loading-screen.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/nintendo-store-loading-screen.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29296,"url":"https:\/\/codemyui.com\/national-geographic-inspired-link-hover-effect\/","url_meta":{"origin":6100,"position":5},"title":"National Geographic Inspired Link Hover Effect","author":"Saijo George","date":"January 17, 2020","format":false,"excerpt":"If you love the link hover effect seen on the National Geographic website, this snippet by shelaine will help you recreate that same link hover effect on your webpage in pure CSS. If you like this check out other deconstruction snippets. If you are having trouble with the pen, try\u2026","rel":"","context":"In \"link\"","block_context":{"text":"link","link":"https:\/\/codemyui.com\/tag\/link\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/National-Geographic-Inspired-Link-Hover-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/National-Geographic-Inspired-Link-Hover-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/National-Geographic-Inspired-Link-Hover-Effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/National-Geographic-Inspired-Link-Hover-Effect.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\/6100","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=6100"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6100\/revisions"}],"predecessor-version":[{"id":25925,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6100\/revisions\/25925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/6105"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=6100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=6100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=6100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}