{"id":21479,"date":"2018-04-23T12:15:55","date_gmt":"2018-04-23T09:15:55","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21479"},"modified":"2018-04-23T12:08:48","modified_gmt":"2018-04-23T09:08:48","slug":"html5-styling-a-progress-bar","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/","title":{"rendered":"HTML5 &#8211; Styling a Progress Bar"},"content":{"rendered":"<p>The <code>progress<\/code> tag introduced in HTML5 can be used to represent the progress of a task.<\/p>\n<p>For example, the following code:<\/p>\n<pre class=\"brush:html\">&lt;progress value=\"80\" max=\"100\"&gt;&lt;\/progress&gt;<\/pre>\n<p>displays:\n<progress value=\"80\" max=\"100\">Unsupported browser<\/progress>\n<p>Different browsers display the progress bar in different styles:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/browser_progress_bars.png\"><img decoding=\"async\" class=\"aligncenter wp-image-21483 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/browser_progress_bars.png\" alt=\"\" width=\"347\" height=\"106\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/browser_progress_bars.png 347w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/browser_progress_bars-300x92.png 300w\" sizes=\"(max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\n<h2>Changing the colour of the progress bar:<\/h2>\n<p>Now let&#8217;s say that you wish to change the colour of the progress bar so that it is red if the value is less than the maximum and green when it equals the maximum. In order to do this, you can use the following CSS, which should work in Chrome, Firefox and IE:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>CSS<\/em><\/span><\/p>\n<pre class=\"brush:css\">progress[value]  {\r\n  -webkit-appearance: none;\r\n\r\n  width: 200px;\r\n  height: 20px;\r\n\r\n  \/* remove border in Firefox *\/\r\n  border: none;\r\n\r\n  \/* IE *\/\r\n  color: red;\r\n}\r\n\r\n\/* Chrome *\/\r\nprogress[value]::-webkit-progress-bar {\r\n  background-color: #eee;\r\n}\r\n\r\nprogress[value]::-webkit-progress-value {\r\n  background-color: red;\r\n}\r\n\r\nprogress[value=\"100\"]::-webkit-progress-value  {\r\n  background-color: green;\r\n}\r\n\r\n\/* Firefox *\/\r\nprogress[value]::-moz-progress-bar {\r\n  background-color: red;\r\n}\r\n\r\nprogress[value=\"100\"]::-moz-progress-bar  {\r\n  background: green;\r\n}\r\n\r\n\/* IE *\/\r\nprogress[value=\"100\"]  {\r\n  color: green;\r\n}<\/pre>\n<p><span style=\"text-decoration: underline;\"><em>HTML<\/em><\/span><\/p>\n<pre class=\"brush:html\"><progress value=\"80\" max=\"100\"><\/progress>\r\n<progress value=\"100\" max=\"100\"><\/progress>\r\n<\/pre>\n<figure id=\"attachment_21486\" aria-describedby=\"caption-attachment-21486\" style=\"width: 762px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/progressbars.png\"><img decoding=\"async\" class=\"wp-image-21486 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/progressbars.png\" alt=\"\" width=\"762\" height=\"40\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/progressbars.png 762w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/progressbars-300x16.png 300w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><\/a><figcaption id=\"caption-attachment-21486\" class=\"wp-caption-text\">Result<\/figcaption><\/figure>\n<h2>Creating a progress bar without HTML5:<\/h2>\n<p>If, like me, you would rather not have browser-specific CSS, then another approach is to create a progress bar without using the HTML5 <code>progress<\/code> tag. This is quite easy, as demonstrated here:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>CSS<\/em><\/span><\/p>\n<pre class=\"brush:css\">.progress-bar {\r\n  background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);\r\n  width: 200px;\r\n  height: 20px;\r\n}\r\n\r\n.progress-bar &gt; span {\r\n  background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);\r\n  height: 100%;\r\n  display: block;\r\n}\r\n\r\n.progress-bar &gt; span[style=\"width: 100%;\"] {\r\n  background: linear-gradient(to bottom, #ad7, #cee 20%, #7a3 45%, #7a3 55%, #ad7);\r\n  height: 100%;\r\n  display: block;\r\n}\r\n<\/pre>\n<p><span style=\"text-decoration: underline;\"><em>HTML<\/em><\/span><\/p>\n<pre class=\"brush:html\"><div class=\"progress-bar\">\r\n    <span style=\"width: 80%;\" \/>\r\n<\/div>\r\n<p\/>\r\n<div class=\"progress-bar\">\r\n    <span style=\"width: 100%;\" \/>\r\n<\/div>    <\/pre>\n<figure id=\"attachment_21492\" aria-describedby=\"caption-attachment-21492\" style=\"width: 297px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/progress2.png\"><img decoding=\"async\" class=\"wp-image-21492 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/progress2.png\" alt=\"\" width=\"297\" height=\"96\" \/><\/a><figcaption id=\"caption-attachment-21492\" class=\"wp-caption-text\">Result<\/figcaption><\/figure>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Fahd Shariff, partner at our <a href=\"\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"http:\/\/fahdshariff.blogspot.com\/2018\/04\/html5-styling-progress-bar.html\" target=\"_blank\" rel=\"noopener\">HTML5 &#8211; Styling a Progress Bar<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=&#8221;80&#8243; max=&#8221;100&#8243;&gt;&lt;\/progress&gt; displays: Unsupported browser Different browsers display the progress bar in different styles: Changing the colour of the progress bar: Now let&#8217;s say that you wish to change the colour of the &hellip;<\/p>\n","protected":false},"author":35,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[236],"class_list":["post-21479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 - Styling a Progress Bar - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=&quot;80&quot;\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 - Styling a Progress Bar - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=&quot;80&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fahd.shariff\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-23T09:15:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fahd Shariff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/fahdshariff\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fahd Shariff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\"},\"author\":{\"name\":\"Fahd Shariff\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/468df5f4a38644e5538d95c405c46ea2\"},\"headline\":\"HTML5 &#8211; Styling a Progress Bar\",\"datePublished\":\"2018-04-23T09:15:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\"},\"wordCount\":192,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\",\"name\":\"HTML5 - Styling a Progress Bar - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2018-04-23T09:15:55+00:00\",\"description\":\"The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=\\\"80\\\"\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 &#8211; Styling a Progress Bar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/468df5f4a38644e5538d95c405c46ea2\",\"name\":\"Fahd Shariff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e94912b8512e11298fe1460c54c3dd906682ce369551cc41b5d27125ae0b9fa0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e94912b8512e11298fe1460c54c3dd906682ce369551cc41b5d27125ae0b9fa0?s=96&d=mm&r=g\",\"caption\":\"Fahd Shariff\"},\"description\":\"Fahd is a software engineer working in the financial services industry. He is passionate about technology and specializes in Java application development in distributed environments.\",\"sameAs\":[\"http:\/\/fahdshariff.blogspot.com\/\",\"https:\/\/www.facebook.com\/fahd.shariff\",\"http:\/\/www.linkedin.com\/in\/fahdshariff\",\"https:\/\/x.com\/https:\/\/twitter.com\/fahdshariff\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fahd-shariff\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 - Styling a Progress Bar - Web Code Geeks - 2026","description":"The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=\"80\"","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:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 - Styling a Progress Bar - Web Code Geeks - 2026","og_description":"The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=\"80\"","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fahd.shariff","article_published_time":"2018-04-23T09:15:55+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fahd Shariff","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/fahdshariff","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fahd Shariff","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/"},"author":{"name":"Fahd Shariff","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/468df5f4a38644e5538d95c405c46ea2"},"headline":"HTML5 &#8211; Styling a Progress Bar","datePublished":"2018-04-23T09:15:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/"},"wordCount":192,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["CSS"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/","name":"HTML5 - Styling a Progress Bar - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2018-04-23T09:15:55+00:00","description":"The progress tag introduced in HTML5 can be used to represent the progress of a task. For example, the following code: &lt;progress value=\"80\"","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-styling-a-progress-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 &#8211; Styling a Progress Bar"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/468df5f4a38644e5538d95c405c46ea2","name":"Fahd Shariff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e94912b8512e11298fe1460c54c3dd906682ce369551cc41b5d27125ae0b9fa0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e94912b8512e11298fe1460c54c3dd906682ce369551cc41b5d27125ae0b9fa0?s=96&d=mm&r=g","caption":"Fahd Shariff"},"description":"Fahd is a software engineer working in the financial services industry. He is passionate about technology and specializes in Java application development in distributed environments.","sameAs":["http:\/\/fahdshariff.blogspot.com\/","https:\/\/www.facebook.com\/fahd.shariff","http:\/\/www.linkedin.com\/in\/fahdshariff","https:\/\/x.com\/https:\/\/twitter.com\/fahdshariff"],"url":"https:\/\/www.webcodegeeks.com\/author\/fahd-shariff\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=21479"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21479\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=21479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=21479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=21479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}