{"id":26978,"date":"2018-10-26T10:06:19","date_gmt":"2018-10-25T23:06:19","guid":{"rendered":"https:\/\/codemyui.com\/?p=26978"},"modified":"2018-10-26T10:10:27","modified_gmt":"2018-10-25T23:10:27","slug":"progress-bars-with-patterns","status":"publish","type":"post","link":"https:\/\/codemyui.com\/progress-bars-with-patterns\/","title":{"rendered":"Progress Bars with Patterns"},"content":{"rendered":"\n

This particular snippet by\u00a0Luca Gesmundo<\/a>\u00a0has got various<\/g> SVG<\/a> patterns to\u00a0fill the progress bar<\/a> which looks really cool. This will look great on modern colourful websites.\u00a0If you need to get more\u00a0background patterns, head over to\u00a0<\/a>All The Free Stock<\/a><\/strong>\u00a0there is a patterns section under free stock photos.<\/p>\n\n\n\n\n\n\n\n

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

Pattern Fill Progress Bars Snippet<\/h2>\n\n\n

\nSee the Pen Bars by Lucagez (@lucagez) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

This particular snippet by\u00a0Luca Gesmundo\u00a0has got various SVG patterns to\u00a0fill the progress bar which looks really cool. This will look great on modern colourful websites.\u00a0If you need to get more\u00a0background patterns, head over to\u00a0All The Free Stock\u00a0there is a patterns section under free stock photos.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":26979,"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":[608602279,904900,112936],"class_list":["post-26978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-pattern","tag-progress-bar","tag-svg","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/10\/Progress-Bars-with-Patterns.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":103,"url":"https:\/\/codemyui.com\/svg-elastic-progress-bars\/","url_meta":{"origin":26978,"position":0},"title":"SVG Elastic Progress Bars","author":"Hima Vincent","date":"November 3, 2015","format":false,"excerpt":"If you are looking for some fancy progress bar for your website, this might be a good option. Designed by Lucas Bebber Check out the Demo and Tutorial on Codrops.","rel":"","context":"In \"progress bar\"","block_context":{"text":"progress bar","link":"https:\/\/codemyui.com\/tag\/progress-bar\/"},"img":{"alt_text":"SVG Elastic Progress Bars","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/svg-elastic-progress-bars.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\/svg-elastic-progress-bars.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/svg-elastic-progress-bars.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/svg-elastic-progress-bars.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28836,"url":"https:\/\/codemyui.com\/soccer-ball-hexagon-pattern-loader\/","url_meta":{"origin":26978,"position":1},"title":"Soccer Ball Hexagon Pattern Loader","author":"Saijo George","date":"November 10, 2019","format":false,"excerpt":"A very simple SVG soccer ball hexagon pattern loader for sports websites by Eyal Cohen. If you are having trouble with the pen, try the archived copy on GitHub Football Snippet","rel":"","context":"In \"hexagon\"","block_context":{"text":"hexagon","link":"https:\/\/codemyui.com\/tag\/hexagon\/"},"img":{"alt_text":"Soccer Ball Hexagon Pattern Loader","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Soccer-Ball-Hexagon-Pattern-Loader.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\/Soccer-Ball-Hexagon-Pattern-Loader.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Soccer-Ball-Hexagon-Pattern-Loader.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Soccer-Ball-Hexagon-Pattern-Loader.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2321,"url":"https:\/\/codemyui.com\/project-deadline-progress-bar-animation\/","url_meta":{"origin":26978,"position":2},"title":"Project Deadline Progress Bar Animation","author":"Hima Vincent","date":"September 2, 2016","format":false,"excerpt":"A hilarious progress bar animation by Jonathan Silva. The progress bar has a person sitting on a chair working away at a desk with a countdown of 7 days, then you see the grim reaper carrying a large scythe entering from the left and as the number of days grows\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Project Deadline Progress Bar Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/project-deadline-progress-bar-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\/project-deadline-progress-bar-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/project-deadline-progress-bar-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/project-deadline-progress-bar-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25444,"url":"https:\/\/codemyui.com\/download-button-circular-progress-indicator\/","url_meta":{"origin":26978,"position":3},"title":"Download Button with Circular Progress Indicator","author":"Saijo George","date":"February 14, 2018","format":false,"excerpt":"Here is a fancy little download button that has a faint neon glow on hover and on clicking it the button transforms into a circular loader like interface to show the progress of the download. There is a stop button on it if you want to stop the download and\u2026","rel":"","context":"In \"anime.js\"","block_context":{"text":"anime.js","link":"https:\/\/codemyui.com\/tag\/anime-js\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/download-button-with-circular-progress-indicator.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]},{"id":30457,"url":"https:\/\/codemyui.com\/force-users-to-win-ping-ping-game-to-unsubscribe-microinteraction\/","url_meta":{"origin":26978,"position":4},"title":"Force Users to Win Ping Ping Game to Unsubscribe MicroInteraction","author":"Saijo George","date":"June 12, 2021","format":false,"excerpt":"Code by: Aaron Iker If you are having trouble with the pen, try the archived copy on GitHub. Play and Win to Unsubscribe Snippet","rel":"","context":"In \"dark pattern\"","block_context":{"text":"dark pattern","link":"https:\/\/codemyui.com\/tag\/dark-pattern\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Force-Users-to-Win-Ping-Ping-Game-to-Unsubscribe-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Force-Users-to-Win-Ping-Ping-Game-to-Unsubscribe-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Force-Users-to-Win-Ping-Ping-Game-to-Unsubscribe-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Force-Users-to-Win-Ping-Ping-Game-to-Unsubscribe-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30106,"url":"https:\/\/codemyui.com\/guilt-tripping-unsubscribe-button-pop-ballon-steal-ice-cream-from-kid\/","url_meta":{"origin":26978,"position":5},"title":"Guilt Tripping Unsubscribe Button – Pop Ballon, Steal Ice Cream from Kid","author":"Saijo George","date":"October 6, 2020","format":false,"excerpt":"Code by: Cooper Goeke If you are having trouble with the pen, try the archived copy on GitHub Unsubscribe Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Guilt-Tripping-Unsubscribe-Button-Pop-Ballon-Steal-Ice-Cream-from-Kid.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Guilt-Tripping-Unsubscribe-Button-Pop-Ballon-Steal-Ice-Cream-from-Kid.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Guilt-Tripping-Unsubscribe-Button-Pop-Ballon-Steal-Ice-Cream-from-Kid.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/10\/Guilt-Tripping-Unsubscribe-Button-Pop-Ballon-Steal-Ice-Cream-from-Kid.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\/26978","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=26978"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26978\/revisions"}],"predecessor-version":[{"id":26981,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26978\/revisions\/26981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26979"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}