{"id":14072,"date":"2019-01-06T06:06:54","date_gmt":"2019-01-06T06:06:54","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=14072"},"modified":"2022-11-29T06:05:48","modified_gmt":"2022-11-29T06:05:48","slug":"cloud-download-button-animation","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/cloud-download-button-animation\/","title":{"rendered":"CLOUD DOWNLOAD BUTTON ANIMATION"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><u><em>Author:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul>\n<li>Jon Kantner<\/li>\n\n\n\n<li>June 20, 2018<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>Made with:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul>\n<li>HTML \/ CSS (SCSS) \/ JavaScript<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>About the code:<\/em><\/u><\/strong><\/h4>\n\n\n\n<p>This is an amazing and awesome Template based on the App Store cloud download icon but animated. The idea is to show spinning water droplets on preload then turn the down arrow into a progress bar after falling. When the download is completed, a checkmark pops out of the cloud.<\/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>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/jkantner\/share\/zip\/dKmodp\" 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\/jkantner\/pen\/dKmodp\" 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: Made with: About the code: This is an amazing and awesome Template based on the App Store cloud download icon but animated. The idea is to show spinning water droplets on preload then turn the down arrow into a progress bar after falling. When the download is completed, a checkmark pops out of the cloud. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":14074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3941],"tags":[3955,3942,20,3953,3954],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/14072"}],"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=14072"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/14072\/revisions"}],"predecessor-version":[{"id":35578,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/14072\/revisions\/35578"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/14074"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=14072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=14072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=14072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}