{"id":29141,"date":"2020-01-07T22:29:00","date_gmt":"2020-01-07T11:29:00","guid":{"rendered":"https:\/\/codemyui.com\/?p=29141"},"modified":"2020-01-07T10:30:29","modified_gmt":"2020-01-06T23:30:29","slug":"upload-button-to-circular-progress-bar-microinteraction","status":"publish","type":"post","link":"https:\/\/codemyui.com\/upload-button-to-circular-progress-bar-microinteraction\/","title":{"rendered":"Upload Button to Circular Progress Bar MicroInteraction"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This sweet upload <a href=\"https:\/\/codemyui.com\/tag\/button\/\" class=\"rank-math-link\">button<\/a> <a href=\"https:\/\/codemyui.com\/tag\/animation\/\" class=\"rank-math-link\">animates<\/a> into a <a href=\"https:\/\/codemyui.com\/tag\/circle\/\" class=\"rank-math-link\">circle<\/a> on click and that circle acts a <a href=\"https:\/\/codemyui.com\/tag\/progress-bar\/\" class=\"rank-math-link\">progress bar<\/a>. This <a href=\"https:\/\/codemyui.com\/tag\/microinteractions\/\" class=\"rank-math-link\">micro-interaction<\/a> was designed by <a href=\"https:\/\/twitter.com\/takane_ichi\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">Takane Ichinose<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/dc8e011624928221a10d32dd4b75b149\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">GitHub<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Button to Circular Progress Bar Snippet<\/h2>\n\n\n<p class='codepen'  data-height='399' data-theme-id='0' data-slug-hash='wRXryM' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Progress Button Microinteractions with VueJS by Takane Ichinose (@takaneichinose) on CodePen.<\/p>\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This sweet upload button animates into a circle on click and that circle acts a progress bar. This micro-interaction was designed by Takane Ichinose.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/upload-button-to-circular-progress-bar-microinteraction\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":29144,"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":[904900,94913,43627,608602270],"class_list":["post-29141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-progress-bar","tag-button","tag-circle","tag-microinteractions","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Upload-Button-to-Circular-Progress-Bar-MicroInteraction.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26878,"url":"https:\/\/codemyui.com\/upload-button-to-progress-indicator-micro-interaction\/","url_meta":{"origin":29141,"position":0},"title":"Upload Button to Progress Indicator Micro Interaction","author":"Saijo George","date":"September 26, 2018","format":false,"excerpt":"With this upload button designed by\u00a0 Aaron Iker\u00a0you get a progress bar indicating the download progress when you click on it. It's a nice little micro-interaction that you can add to your next web app.\u00a0 If you are having trouble with the pen, try the archived copy on GitHub Button\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Upload Button to Progress Indicator Micro Interaction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Upload-Button-to-Progress-Indicator-Micro-Interaction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Upload-Button-to-Progress-Indicator-Micro-Interaction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Upload-Button-to-Progress-Indicator-Micro-Interaction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Upload-Button-to-Progress-Indicator-Micro-Interaction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28962,"url":"https:\/\/codemyui.com\/download-button-with-vertical-progress-indicator-microinteraction\/","url_meta":{"origin":29141,"position":1},"title":"Download Button with Vertical Progress Indicator MicroInteraction","author":"Saijo George","date":"November 25, 2019","format":false,"excerpt":"A simple but effective micro-interaction design for download buttons by Aaron Iker. When you click on one of the download buttons the down icon , the down line jumps up and pulls down a progress indicator kinda like pulling down a shutter and the download icon changes to a tick\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Download Button with Vertical Progress Indicator MicroInteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.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\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28913,"url":"https:\/\/codemyui.com\/button-to-drone-delivery-progress-bar-animation\/","url_meta":{"origin":29141,"position":2},"title":"Button to Drone Delivery Progress Bar Animation","author":"Saijo George","date":"November 15, 2019","format":false,"excerpt":"This is a cool button that can be used on an eCommerce site that uses drones for delivery. Remember we had a similar one where the button changes to a delivery truck and in this one by Nikolay Talanov we see that a drone pick it up and flies over\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Button to Drone Delivery Progress Bar Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Button-to-Drone-Delivery-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\/2019\/11\/Button-to-Drone-Delivery-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Button-to-Drone-Delivery-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Button-to-Drone-Delivery-Progress-Bar-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26806,"url":"https:\/\/codemyui.com\/attention-grabbing-cta-button-animation\/","url_meta":{"origin":29141,"position":3},"title":"Attention Grabbing CTA Button Animation","author":"Saijo George","date":"August 23, 2018","format":false,"excerpt":"This pure CSS CTA microinteraction for a button was designed by Daniel Gonzalez. You have 2 small circles hovering the text and when you move the move over it, they expand to form a layered background for the text effectively converting it into a button. If you are having trouble\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Attention Grabbing CTA Button Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Attention-Grabbing-CTA-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\/2018\/08\/Attention-Grabbing-CTA-Button-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Attention-Grabbing-CTA-Button-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Attention-Grabbing-CTA-Button-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28560,"url":"https:\/\/codemyui.com\/zoom-in-circle-effect-for-radio-button\/","url_meta":{"origin":29141,"position":4},"title":"Zoom In Circle Effect for Radio Button","author":"Saijo George","date":"October 21, 2019","format":false,"excerpt":"Need some fancy micro-interaction for your radio buttons on your next project? Have a look at this CSS only sweet zoom in circle effect when you select the radio button designed by Tommaso Poletti. If you are having trouble with the pen, try the archived copy on GitHub Radio Button\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Zoom In Circle Effect for Radio Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Zoom-In-Circle-Effect-for-Radio-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Zoom-In-Circle-Effect-for-Radio-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Zoom-In-Circle-Effect-for-Radio-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Zoom-In-Circle-Effect-for-Radio-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28581,"url":"https:\/\/codemyui.com\/clockwise-circle-fill-animation-for-radio-button-selection\/","url_meta":{"origin":29141,"position":5},"title":"Clockwise Circle Fill Animation for Radio Button Selection","author":"Saijo George","date":"October 31, 2019","format":false,"excerpt":"A simple mico interaction where you have a clockwise circle fill animation for radio button selection. This SVG snippet was designed by Andreas Storm. If you are having trouble with the pen, try the archived copy on GitHub Radio Button Circle Fill Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Clockwise Circle Fill Animation for Radio Button Selection","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Clockwise-Circle-Fill-Animation-for-Radio-Button-Selection.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Clockwise-Circle-Fill-Animation-for-Radio-Button-Selection.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Clockwise-Circle-Fill-Animation-for-Radio-Button-Selection.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Clockwise-Circle-Fill-Animation-for-Radio-Button-Selection.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\/29141","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=29141"}],"version-history":[{"count":3,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29141\/revisions"}],"predecessor-version":[{"id":29146,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29141\/revisions\/29146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/29144"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=29141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=29141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=29141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}