{"id":30559,"date":"2021-11-23T12:12:56","date_gmt":"2021-11-23T12:12:56","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=30559"},"modified":"2022-01-21T12:22:19","modified_gmt":"2022-01-21T12:22:19","slug":"upload-progress-animation-microinteraction-with-gsap","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/upload-progress-animation-microinteraction-with-gsap\/","title":{"rendered":"UPLOAD PROGRESS ANIMATION MICROINTERACTION WITH GSAP"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Takane Ichinose<\/li><li>July 20, 2020<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS \/ JS<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is an amazing and cool Progress Bar, in which, on the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a speech bubble above the progress bar will be shown. That speech bubble shows the percentage of the upload progress. The speech bubble will tilt when the progress starts. After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done. After 5 seconds, the button will return into its normal state.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> gsap.js<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/takaneichinose\/share\/zip\/jOWXBBd\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/takaneichinose\/pen\/jOWXBBd\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Takane Ichinose July 20, 2020 Made with: HTML \/ CSS \/ JS About the code: This is an amazing and cool Progress Bar, in which, on the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a speech bubble above the progress bar will be shown. That speech bubble shows the percentage of the upload progress. The speech bubble will tilt when the progress starts. After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done. After 5 seconds, the button will return into its normal state. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari <!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":30560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6862,6423],"tags":[5935,2388,6868,6427,5934,8414],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/30559"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=30559"}],"version-history":[{"count":3,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/30559\/revisions"}],"predecessor-version":[{"id":31924,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/30559\/revisions\/31924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/30560"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=30559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=30559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=30559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}