{"id":7521,"date":"2024-01-16T16:59:00","date_gmt":"2024-01-16T16:59:00","guid":{"rendered":"https:\/\/codehim.com\/?p=7521"},"modified":"2024-01-22T15:01:25","modified_gmt":"2024-01-22T10:01:25","slug":"skill-progressbar-using-html-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/","title":{"rendered":"Skill Progressbar using HTML CSS"},"content":{"rendered":"

This HTML and CSS code snippet helps you to create progressbar for skill set for your portfolio. The progress bar comes with beautiful gradient colors, label and percentage values. You can set the filled value according to your grip on specific skill to visualize your expertise.<\/p>\n

How to Create Skill Progressbar using HTML CSS<\/h2>\n

1. First of all, load the prefix-free JS into the head tag of your HTML document.<\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prefixfree\/1.0.7\/prefixfree.min.js\"><\/script><\/pre>\n
2. After that, create the\u00a0HTML5 progress element <\/a>with style attribute and define CSS width property with respect to data-value attribute. Alternatively, create a div element with a class name “progress-bar” and place a span element with style attribute inside it.<\/p>\n
<ul>\r\n\t<li>\r\n\t\t<h2>Frontend<\/h2>\r\n\t\t\r\n\t\t<!-- HTML5 -->\r\n    <p style=\"width:80%\" data-value=\"80\">HTML5<\/p>\r\n\t\t<progress max=\"100\" value=\"80\" class=\"html5\">\r\n\t\t\t<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->\r\n\t\t<div class=\"progress-bar\">\r\n\t\t\t\t<span style=\"width: 80%\">80%<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/progress>\r\n\t\t\r\n\t\t<!-- CSS3 -->\r\n    <p style=\"width:60%\" data-value=\"60\">CSS3<\/p>\r\n\t\t<progress max=\"100\" value=\"60\" class=\"css3\">\r\n\t\t\t<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->\r\n\t\t\t<div class=\"progress-bar\">\r\n\t\t\t\t<span style=\"width: 60%\">60%<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/progress>\r\n\t\t\r\n\t\t<!-- jQuery -->\r\n    <p style=\"width:50%\" data-value=\"50\">jQuery<\/p>\r\n\t\t<progress max=\"100\" value=\"50\" class=\"jquery\">\r\n\t\t\t<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->\r\n\t\t\t<div class=\"progress-bar\">\r\n\t\t\t\t<span style=\"width: 50%\">50%<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/progress>\r\n\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<h2>Backend<\/h2>\r\n\t\t\r\n    <!-- Python -->\r\n    <p style=\"width:75%\" data-value=\"75\">Python<\/p>\r\n\t\t<progress max=\"100\" value=\"75\" class=\"python\">\r\n\t\t\t<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->\r\n\t\t\t<div class=\"progress-bar\">\r\n\t\t\t\t<span style=\"width: 75%\">75%<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/progress>\r\n\t\t\r\n\t\t<!-- PHP -->\r\n    <p style=\"width:65%\" data-value=\"65\">PHP<\/p>\r\n\t\t<progress max=\"100\" value=\"65\" class=\"php\">\r\n\t\t\t<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->\r\n\t\t\t<div class=\"progress-bar\">\r\n\t\t\t\t<span style=\"width: 65%\">65%<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/progress>\r\n\t\t\r\n\t\t<!-- Node.js -->\r\n    <p style=\"width:35%\" data-value=\"35\">Node.js<\/p>\r\n    <progress max=\"100\" value=\"35\" class=\"node-js\">\r\n\t\t\t<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->\r\n\t\t\t<div class=\"progress-bar\">\r\n\t\t\t\t<span style=\"width: 35%\">35%<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/progress>\t\t\r\n\t\t\r\n\t<\/li>\r\n<\/ul><\/pre>\n
3. Style the progress bar using the following CSS:<\/p>\n
@import url(https:\/\/fonts.googleapis.com\/css?family=Expletus+Sans);\r\n\r\n\/* Basic resets *\/\r\n\r\n* { \r\n\tmargin:0; padding:0; \r\n\tbox-sizing: border-box;\r\n}\r\nli {\r\n       min-width: 360px;\r\n\tlist-style-type: none;\r\n\tpadding-right: 5.3333333%;\r\n}\r\n\r\nli:nth-child(even) { margin-bottom: 5em;}\r\n\r\nh2 {\r\n\tmargin: 0 0 1.5em;\r\n\tborder-bottom: 1px solid #ccc;\r\n\tpadding: 0 0 .25em;\r\n}\r\n\r\n\/* Styling an indeterminate progress bar *\/\r\n\r\nprogress:not(value) {\r\n\t\/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. *\/\r\n}\r\n\r\n\/* Styling the determinate progress element *\/\r\n\r\nprogress[value] {\r\n\t\/* Get rid of the default appearance *\/\r\n\tappearance: none;\r\n\t\r\n\t\/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. *\/\r\n\tborder: none;\r\n\t\r\n\t\/* Add dimensions *\/\r\n\twidth: 100%; height: 20px;\r\n\t\r\n\t\/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. *\/\r\n\t  background-color: whiteSmoke;\r\n\t  border-radius: 3px;\r\n\t  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;\r\n\t\r\n\t\/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. *\/\r\n\tcolor: royalblue;\r\n\t\r\n\tposition: relative;\r\n\tmargin: 0 0 1.5em; \r\n}\r\n\r\n\/*\r\nWebkit browsers provide two pseudo classes that can be use to style HTML5 progress element.\r\n-webkit-progress-bar -> To style the progress element container\r\n-webkit-progress-value -> To style the progress element value.\r\n*\/\r\n\r\nprogress[value]::-webkit-progress-bar {\r\n\tbackground-color: whiteSmoke;\r\n\tborder-radius: 3px;\r\n\tbox-shadow: 0 2px 3px rgba(0,0,0,.5) inset;\r\n}\r\n\r\nprogress[value]::-webkit-progress-value {\r\n\tposition: relative;\r\n\t\r\n\tbackground-size: 35px 20px, 100% 100%, 100% 100%;\r\n\tborder-radius:3px;\r\n\t\r\n\t\/* Let's animate this *\/\r\n\tanimation: animate-stripes 5s linear infinite;\r\n}\r\n\r\n@keyframes animate-stripes { 100% { background-position: -100px 0; } }\r\n\r\n\/* Let's spice up things little bit by using pseudo elements. *\/\r\n\r\nprogress[value]::-webkit-progress-value:after {\r\n\t\/* Only webkit\/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! *\/\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\t\r\n\twidth:5px; height:5px;\r\n\ttop:7px; right:7px;\r\n\t\r\n\tbackground-color: white;\r\n\tborder-radius: 100%;\r\n}\r\n\r\n\/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar *\/\r\n\r\nprogress[value]::-moz-progress-bar {\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-moz-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -moz-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -moz-linear-gradient( left, #09c, #f44);\r\n\t\r\n\tbackground-size: 35px 20px, 100% 100%, 100% 100%;\r\n\tborder-radius:3px;\r\n\t\r\n\t\/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block *\/\r\n}\r\n\r\n\/* Fallback technique styles *\/\r\n.progress-bar {\r\n\tbackground-color: whiteSmoke;\r\n\tborder-radius: 3px;\r\n\tbox-shadow: 0 2px 3px rgba(0,0,0,.5) inset;\r\n\r\n\t\/* Dimensions should be similar to the parent progress element. *\/\r\n\twidth: 100%; height:20px;\r\n}\r\n\r\n.progress-bar span {\r\n\tbackground-color: royalblue;\r\n\tborder-radius: 3px;\r\n\t\r\n\tdisplay: block;\r\n\ttext-indent: -9999px;\r\n}\r\n\r\np[data-value] { \r\n  \r\n  position: relative; \r\n}\r\n\r\n\/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. *\/\r\n\r\np[data-value]:after {\r\n\tcontent: attr(data-value) '%';\r\n\tposition: absolute; right:0;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.html5::-webkit-progress-value,\r\n.python::-webkit-progress-value  {\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-webkit-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -webkit-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -webkit-linear-gradient( left, #09c, #f44);\r\n}\r\n\r\n.css3::-webkit-progress-value,\r\n.php::-webkit-progress-value \r\n{\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-webkit-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -webkit-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -webkit-linear-gradient( left, #09c, #ff0);\r\n}\r\n\r\n.jquery::-webkit-progress-value,\r\n.node-js::-webkit-progress-value \r\n{\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-webkit-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -webkit-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -webkit-linear-gradient( left, #09c, #690);\r\n}\r\n\r\n\/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. *\/\r\n\r\n.html5::-moz-progress-bar,\r\n.php::-moz-progress-bar {\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-moz-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -moz-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -moz-linear-gradient( left, #09c, #f44);\r\n}\r\n\r\n.css3::-moz-progress-bar,\r\n.php::-moz-progress-bar {\r\n{\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-moz-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -moz-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -moz-linear-gradient( left, #09c, #ff0);\r\n}\r\n\r\n.jquery::-moz-progress-bar,\r\n.node-js::-moz-progress-bar {\r\n\t\/* Gradient background with Stripes *\/\r\n\tbackground-image:\r\n\t-moz-linear-gradient( 135deg,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 33%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t rgba(0,0,0,.1) 66%,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t transparent 66%),\r\n    -moz-linear-gradient( top,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(255, 255, 255, .25),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trgba(0,0,0,.2)),\r\n     -moz-linear-gradient( left, #09c, #690);\r\n}\r\n\r\n\/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill *\/\r\n\r\n  \r\n\/* THE END *\/<\/pre>\n
4. Finally, load the HTML 5 Progress Polyfill JS by adding the following CDN link before closing the body tag:<\/p>\n
<script src='https:\/\/raw.github.com\/LeaVerou\/HTML5-Progress-polyfill\/master\/progress-polyfill.min.js'><\/script>\r\n<\/pre>\n
That’s all! hopefully, you have successfully created skill progressbar. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This HTML and CSS code snippet helps you to create progressbar for skill set for your portfolio. The progress bar…<\/p>\n","protected":false},"author":1,"featured_media":7530,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-7521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"\nSkill Progressbar using HTML CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight HTML and CSS code snippet to create skill progressbar. You can view demo and download source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Skill Progressbar using HTML CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight HTML and CSS code snippet to create skill progressbar. You can view demo and download source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-16T16:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:01:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Skill Progressbar using HTML CSS\",\"datePublished\":\"2024-01-16T16:59:00+00:00\",\"dateModified\":\"2024-01-22T10:01:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\"},\"wordCount\":162,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png\",\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\",\"name\":\"Skill Progressbar using HTML CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png\",\"datePublished\":\"2024-01-16T16:59:00+00:00\",\"dateModified\":\"2024-01-22T10:01:25+00:00\",\"description\":\"Here is a lightweight HTML and CSS code snippet to create skill progressbar. You can view demo and download source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Skill Progressbar using HTML CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Skill Progressbar using HTML CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Skill Progressbar using HTML CSS — CodeHim","description":"Here is a lightweight HTML and CSS code snippet to create skill progressbar. You can view demo and download source code.","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:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/","og_locale":"en_US","og_type":"article","og_title":"Skill Progressbar using HTML CSS — CodeHim","og_description":"Here is a lightweight HTML and CSS code snippet to create skill progressbar. You can view demo and download source code.","og_url":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-16T16:59:00+00:00","article_modified_time":"2024-01-22T10:01:25+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Skill Progressbar using HTML CSS","datePublished":"2024-01-16T16:59:00+00:00","dateModified":"2024-01-22T10:01:25+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/"},"wordCount":162,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png","articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/","url":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/","name":"Skill Progressbar using HTML CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png","datePublished":"2024-01-16T16:59:00+00:00","dateModified":"2024-01-22T10:01:25+00:00","description":"Here is a lightweight HTML and CSS code snippet to create skill progressbar. You can view demo and download source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/11\/Skill-Progressbar-using-HTML-CSS.png","width":1280,"height":960,"caption":"Skill Progressbar using HTML CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/skill-progressbar-using-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Skill Progressbar using HTML CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3862,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/7521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=7521"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/7521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/7530"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=7521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=7521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=7521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}