{"id":2240,"date":"2016-09-02T11:37:42","date_gmt":"2016-09-02T01:37:42","guid":{"rendered":"http:\/\/codemyui.com\/?p=2240"},"modified":"2018-05-17T09:53:29","modified_gmt":"2018-05-16T23:53:29","slug":"sync-line-circular-spinner-loading-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/sync-line-circular-spinner-loading-animation\/","title":{"rendered":"Out of Sync Line Circular Spinner Loading Animation"},"content":{"rendered":"

Here is another loading animation<\/a> in pure CSS<\/a>, this was designed by Slava Zuryanov. In this snippet we can see a bunch of lines of different lengths, spinning at different speeds creating a nice effect. <\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

\nSee the Pen Loader #3. Rotation forms by Slava (@SlavaZuryanov) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

Here is another loading animation in pure CSS, this was designed by Slava Zuryanov. In this snippet we can see a bunch of lines of different lengths, spinning at different speeds creating a nice effect.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":2246,"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":[16439113,30305495],"class_list":["post-2240","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\/2016\/09\/out-of-sync-line-circular-spinner-loading-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":129,"url":"https:\/\/codemyui.com\/pure-css-loading-animation\/","url_meta":{"origin":2240,"position":0},"title":"Pure CSS Loading Animation","author":"Hima Vincent","date":"October 19, 2015","format":false,"excerpt":"This is cool loading animation using pure CSS. Designed by Jack Doyle. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"Pure CSS Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-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\/10\/pure-css-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/pure-css-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":2240,"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":96,"url":"https:\/\/codemyui.com\/pure-css-bookshelf-loading-animation\/","url_meta":{"origin":2240,"position":2},"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":2240,"position":3},"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":2240,"position":4},"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":2240,"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\/2240","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=2240"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2240\/revisions"}],"predecessor-version":[{"id":26053,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/2240\/revisions\/26053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/2246"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=2240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=2240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=2240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}