{"id":25384,"date":"2018-01-30T12:45:11","date_gmt":"2018-01-30T02:45:11","guid":{"rendered":"https:\/\/codemyui.com\/?p=25384"},"modified":"2018-01-30T12:45:11","modified_gmt":"2018-01-30T02:45:11","slug":"nintendo-store-loading-screen","status":"publish","type":"post","link":"https:\/\/codemyui.com\/nintendo-store-loading-screen\/","title":{"rendered":"Nintendo Store Loading Screen"},"content":{"rendered":"<p>This is a <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS only<\/a> <a href=\"https:\/\/codemyui.com\/tag\/full-screen\/\">fullscreen<\/a> <a href=\"https:\/\/codemyui.com\/tag\/loading-animation\/\">loading animation<\/a> designed by <a href=\"https:\/\/twitter.com\/steveeeie\" target=\"_blank\" rel=\"noopener\">Steve Meredith<\/a>, this loading effect <a href=\"https:\/\/codemyui.com\/tag\/deconstruction\/\">can be seen in<\/a> the Nintendo Store.  <\/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\/a007bc070d106fd6dd030252f930fa89\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Nintendo Store Loading Snippet<\/h2>\n<p class='codepen'  data-height='413' data-theme-id='0' data-slug-hash='EoQBxd' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Switch Style Loading Screen With CSS Variables. by Steve Meredith (@steveeeie) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a CSS only fullscreen loading animation designed by Steve Meredith, this loading effect can be seen in the Nintendo Store.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/nintendo-store-loading-screen\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25385,"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,2434200,16439113,30305495],"class_list":["post-25384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-deconstruction","tag-full-screen","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\/2018\/01\/nintendo-store-loading-screen.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":12568,"url":"https:\/\/codemyui.com\/spinning-loading-animation-css\/","url_meta":{"origin":25384,"position":0},"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":10889,"url":"https:\/\/codemyui.com\/pure-css-potion-loading-animation\/","url_meta":{"origin":25384,"position":1},"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":24989,"url":"https:\/\/codemyui.com\/pure-css-gradient-colour-slide-puzzle-style-loading-animation\/","url_meta":{"origin":25384,"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":29441,"url":"https:\/\/codemyui.com\/loading-text-spinning-around-a-sphere\/","url_meta":{"origin":25384,"position":3},"title":"Loading Text Spinning around a Sphere","author":"Saijo George","date":"February 11, 2020","format":false,"excerpt":"Here is a really cool loading text animation that keeps spinning around a sphere by Jon Kantner, it can work well for text-based loading screens. If you are having trouble with the pen, try the archived copy on GitHub Text Spinning Snippet","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Loading Text Spinning around a Sphere","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Loading-Text-Spinning-around-a-Sphere.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\/Loading-Text-Spinning-around-a-Sphere.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Loading-Text-Spinning-around-a-Sphere.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Loading-Text-Spinning-around-a-Sphere.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28755,"url":"https:\/\/codemyui.com\/pure-css-skeleton-screen-gleam-animation-for-light-dark-and-grey-mode-card-ui\/","url_meta":{"origin":25384,"position":4},"title":"Pure CSS Skeleton Screen Gleam Animation for light, dark and grey mode Card UI","author":"Saijo George","date":"November 4, 2019","format":false,"excerpt":"Here is a CSS only snippet to add that fancy skeleton screen gleam loading animation to your card UI inspired content blocks. You have multiple variations from light mode, dark mode and light mode with a grey background and also ones with high contrast options. If you are having trouble\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Pure CSS Skeleton Screen Gleam Animation for light, dark and grey mode Card UI","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Pure-CSS-Skeleton-Screen-Gleam-Animation-for-light-dark-and-grey-mode-Card-UI.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Pure-CSS-Skeleton-Screen-Gleam-Animation-for-light-dark-and-grey-mode-Card-UI.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Pure-CSS-Skeleton-Screen-Gleam-Animation-for-light-dark-and-grey-mode-Card-UI.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Pure-CSS-Skeleton-Screen-Gleam-Animation-for-light-dark-and-grey-mode-Card-UI.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":25384,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25384","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25384"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25384\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25385"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}