{"id":1387,"date":"2016-08-03T19:42:46","date_gmt":"2016-08-03T09:42:46","guid":{"rendered":"http:\/\/codemyui.com\/?p=1387"},"modified":"2018-05-17T12:17:39","modified_gmt":"2018-05-17T02:17:39","slug":"circular-water-fill-loading-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/circular-water-fill-loading-animation\/","title":{"rendered":"Circular Water Fill Loading Animation"},"content":{"rendered":"<p>When you want to show a <a href=\"https:\/\/codemyui.com\/category\/loading-animation\/\">loading animation<\/a> in a web page, this might be an elegant solution for you. When this snippet loads you will see water filling up in a circular space along with the percentage.<\/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\/c59acee39a10300d5e09628d3914e2a8\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='545' data-theme-id='0' data-slug-hash='jAzGAw' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen wavePercent by Elaine (@ElaineXu) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>When you want to show a loading animation in a web page, this might be an elegant solution for you. When this snippet loads you will see water filling up in a circular space along with the percentage.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/circular-water-fill-loading-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1393,"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":[1807,16439113],"class_list":["post-1387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-loading-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/circular-water-fill-loading-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":2240,"url":"https:\/\/codemyui.com\/sync-line-circular-spinner-loading-animation\/","url_meta":{"origin":1387,"position":0},"title":"Out of Sync Line Circular Spinner Loading Animation","author":"Hima Vincent","date":"September 2, 2016","format":false,"excerpt":"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. 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":"Out of Sync Line Circular Spinner Loading Animation","src":"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&resize=350%2C250","width":350,"height":250,"srcset":"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&resize=350%2C250 1x, 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&resize=525%2C375 1.5x, 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&resize=700%2C500 2x"},"classes":[]},{"id":24753,"url":"https:\/\/codemyui.com\/git-kraken-inspired-rotate-loading-animation\/","url_meta":{"origin":1387,"position":1},"title":"GIT Kraken Inspired Rotate Loading Animation","author":"Hima Vincent","date":"October 4, 2017","format":false,"excerpt":"This loading animation was designed by Colin Horn, it has a spinning circular loader and will look great on pages that are content heavy and needs to show a loader before revealing the content. If you are having trouble with the pen, try the archived copy on GitHub Rotate &\u2026","rel":"","context":"In \"loading animation\"","block_context":{"text":"loading animation","link":"https:\/\/codemyui.com\/tag\/loading-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/rotate-pulsating-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\/09\/rotate-pulsating-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/rotate-pulsating-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/rotate-pulsating-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2602,"url":"https:\/\/codemyui.com\/circular-image-gallery\/","url_meta":{"origin":1387,"position":2},"title":"Circular Image Gallery","author":"Hima Vincent","date":"October 17, 2016","format":false,"excerpt":"Circular image gallery where you can have multiple images. The loading animation for this images is a circular swirl. Designed by Steve Gardner. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Circular Image Gallery","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/circular-image-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\/2016\/09\/circular-image-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/circular-image-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/circular-image-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6194,"url":"https:\/\/codemyui.com\/loading-animations\/","url_meta":{"origin":1387,"position":3},"title":"Various Circular Loading Animation Effects CSS Only","author":"Hima Vincent","date":"February 21, 2017","format":false,"excerpt":"These are Pure CSS preloaders that you can use in your next web project, it was designed by Jakob Lewis. There are six different spinners to choose from: Three out of sync lines spinning around Hour and minute hand of a clock Pulsating circle A line spinning around Something like\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/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\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loading-animations.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25281,"url":"https:\/\/codemyui.com\/gooey-circular-spinner\/","url_meta":{"origin":1387,"position":4},"title":"A Gooey Circular Spinner","author":"Saijo George","date":"December 18, 2017","format":false,"excerpt":"With this particular SVG snippet, Alexandr Izumenko has recreated the gooey circular spinner from a dribbble shot by Misha Heesakkers. The circle splits up into three smaller circles then does a circular loop them merges back to a bigger circle. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"circle\"","block_context":{"text":"circle","link":"https:\/\/codemyui.com\/tag\/circle\/"},"img":{"alt_text":"A Gooey Circular Spinner","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/a-gooey-circular-spinner.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/a-gooey-circular-spinner.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/a-gooey-circular-spinner.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/a-gooey-circular-spinner.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1603,"url":"https:\/\/codemyui.com\/simple-upload-button-animation\/","url_meta":{"origin":1387,"position":5},"title":"A Simple Upload Button Animation","author":"Hima Vincent","date":"August 17, 2016","format":false,"excerpt":"Check out this cool upload button animation designed by Eva Lettner. When you click on the upload button, the circular space will start to fill up and the upload icon will transform into a tick icon. Simultaneously the upload button will transform into a reset button. And when you click\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"A Simple Upload Button Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/a-simple-upload-button-animation.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\/a-simple-upload-button-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/a-simple-upload-button-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/a-simple-upload-button-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\/1387","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=1387"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1387\/revisions"}],"predecessor-version":[{"id":26089,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1387\/revisions\/26089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1393"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=1387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=1387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=1387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}