{"id":290,"date":"2015-03-18T11:30:00","date_gmt":"2015-03-18T11:30:00","guid":{"rendered":"http:\/\/localhost\/?p=290"},"modified":"2015-12-16T19:41:21","modified_gmt":"2015-12-16T19:41:21","slug":"svg-spinners","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/svg-spinners","title":{"rendered":"Ionic 1.0 RC1: SVG Spinners"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"100%\" height=\"350\" data-src=\"http:\/\/s.codepen.io\/ionic\/debug\/GgwVON?\" frameborder=\"0\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p>Now that we\u2019ve released Ionic 1.0, we want to share more about our favorite new Ionic features. Last week, <a href=\"https:\/\/twitter.com\/adamdbradley\">Adam<\/a> wrote about his favorite new feature in Ionic 1.0, <a href=\"http:\/\/ionicframework.com\/blog\/rc0-swipe-to-go-back\/\">Swipe to Go Back<\/a>. Personally, I\u2019m most excited about our new animated SVG spinners, and I thought I\u2019d explain why we decided to change the spinners and what the new SVG spinners can do for your app.<\/p>\n<p><!--more--><\/p>\n<h3 id=\"whysvgs\">Why SVGs?<\/h3>\n<p>Why would we need new spinners? After all, Ionicons already come with animated font icons that get the job done. Well, the older animated font icons were subjected to the browser\u2019s font rendering, which differs between iOS and Android and among all the different versions of Android. Normally, this wouldn\u2019t make a difference, since all fonts get rendered out as static content, but the animated font icons weren\u2019t static. Depending on which browser you were using, they would rotate, and users would see the icon wobble. We had to face the facts: Animated Font Icons Were Not An Ideal Solution. <\/p>\n<div style=\"float: right; margin-right: -160px\">\n<p data-height=\"568\" data-theme-id=\"3572\" data-slug-hash=\"OPaxME\" data-default-tab=\"result\" class=\"codepen\">See the Pen by <a href=\"http:\/\/codepen.io\/ionic\/pen\/OPaxME\">Ionic<\/a> (<a href=\"http:\/\/codepen.io\/ionic\">@ionic<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>  <script async=\"\" src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script>\n<\/div>\n<h3 id=\"enteranimatedsvgs\">Enter Animated SVGs<\/h3>\n<p>Since animated icons were not a perfect solution, we decided to move to full SVG icons, in order to create icons that weren\u2019t subjected to the browser&#8217;s font rendering. An added benefit was that since we use Angular, we could encapsulate a bunch of different icons inside a <a href=\"https:\/\/github.com\/driftyco\/ionic\/blob\/master\/js\/angular\/controller\/spinnerController.js\">directive<\/a>, and developers wouldn\u2019t have to deal with the SVG markup. <\/p>\n<p>Did we lose the ability to style the icons? Nope; you\u2019ll still get to customize the icons to the colors of your choice and even use the built-in Ionic colors. To top it off, since the icons are a directive, we can switch them out at run time for Platform Continuity, and iOS and Android will each get the correct icons. This is also configurable, so you have the option of passing in one icon for both platforms. <\/p>\n<p>Be sure to check out the <a href=\"http:\/\/ionicframework.com\/docs\/nightly\/api\/directive\/ionSpinner\/\">documentation for the spinners<\/a> and try them out in your own app! <\/p>\n<p>Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now that we\u2019ve released Ionic 1.0, we want to share more about our favorite new Ionic features. Last week, Adam wrote about his favorite new feature in Ionic 1.0, Swipe to Go Back. Personally, I\u2019m most excited about our new animated SVG spinners, and I thought I\u2019d explain why we decided to change the spinners [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-290","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ionic 1.0 RC1: SVG Spinners - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/svg-spinners\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic 1.0 RC1: SVG Spinners\" \/>\n<meta property=\"og:description\" content=\"Now that we\u2019ve released Ionic 1.0, we want to share more about our favorite new Ionic features. Last week, Adam wrote about his favorite new feature in Ionic 1.0, Swipe to Go Back. Personally, I\u2019m most excited about our new animated SVG spinners, and I thought I\u2019d explain why we decided to change the spinners [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/svg-spinners\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-18T11:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:41:21+00:00\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/svg-spinners#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/svg-spinners\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Ionic 1.0 RC1: SVG Spinners\",\"datePublished\":\"2015-03-18T11:30:00+00:00\",\"dateModified\":\"2015-12-16T19:41:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/svg-spinners\"},\"wordCount\":347,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/svg-spinners\",\"url\":\"https:\/\/ionic.io\/blog\/svg-spinners\",\"name\":\"Ionic 1.0 RC1: SVG Spinners - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2015-03-18T11:30:00+00:00\",\"dateModified\":\"2015-12-16T19:41:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/svg-spinners#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/svg-spinners\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/svg-spinners#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic 1.0 RC1: SVG Spinners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic 1.0 RC1: SVG Spinners - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/svg-spinners","og_locale":"en_US","og_type":"article","og_title":"Ionic 1.0 RC1: SVG Spinners","og_description":"Now that we\u2019ve released Ionic 1.0, we want to share more about our favorite new Ionic features. Last week, Adam wrote about his favorite new feature in Ionic 1.0, Swipe to Go Back. Personally, I\u2019m most excited about our new animated SVG spinners, and I thought I\u2019d explain why we decided to change the spinners [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/svg-spinners","og_site_name":"Ionic Blog","article_published_time":"2015-03-18T11:30:00+00:00","article_modified_time":"2015-12-16T19:41:21+00:00","author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/svg-spinners#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/svg-spinners"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Ionic 1.0 RC1: SVG Spinners","datePublished":"2015-03-18T11:30:00+00:00","dateModified":"2015-12-16T19:41:21+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/svg-spinners"},"wordCount":347,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/svg-spinners","url":"https:\/\/ionic.io\/blog\/svg-spinners","name":"Ionic 1.0 RC1: SVG Spinners - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2015-03-18T11:30:00+00:00","dateModified":"2015-12-16T19:41:21+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/svg-spinners#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/svg-spinners"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/svg-spinners#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic 1.0 RC1: SVG Spinners"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}