[email protected]

Tailwind CSS Circular Progress Bar

By hafizhaziq.dev

Circular progress bar with the list of skills.

Share

\r\n \r\n<main class=\"grid w-full min-h-screen text-gray-100 bg-gray-900 place-content-center\">\r\n\r\n <section x-data=\"skillDisplay\"\r\n class=\"p-6 space-y-6 bg-gray-800 rounded-xl md:grid md:grid-cols-2 md:gap-4 sm:space-y-0\">\r\n <div class=\"grid grid-cols-2 gap-6\">\r\n <template x-for=\"skill in skills\">\r\n <button x-text=\"skill.title\"\r\n class=\"px-4 py-2 text-xl text-gray-100 transition bg-blue-600 rounded-md h-14 w-44 hover:bg-blue-700\"\r\n :class=\"(currentSkill.title == skill.title) && 'font-bold ring-2 ring-gray-100'\"\r\n @click=\"currentSkill = skill\"><\/button>\r\n <\/template>\r\n <\/div>\r\n\r\n <div class=\"flex items-center justify-center\" x-data=\"{ circumference: 2 * 22 \/ 7 * 120 }\">\r\n <svg class=\"transform -rotate-90 w-72 h-72\">\r\n <circle cx=\"145\" cy=\"145\" r=\"120\" stroke=\"currentColor\" stroke-width=\"30\" fill=\"transparent\"\r\n class=\"text-gray-700\" \/>\r\n\r\n <circle cx=\"145\" cy=\"145\" r=\"120\" stroke=\"currentColor\" stroke-width=\"30\" fill=\"transparent\"\r\n :stroke-dasharray=\"circumference\"\r\n :stroke-dashoffset=\"circumference - currentSkill.percent \/ 100 * circumference\"\r\n class=\"text-blue-500 \" \/>\r\n <\/svg>\r\n <span class=\"absolute text-5xl\" x-text=\"`${currentSkill.percent}%`\"><\/span>\r\n <\/section>\r\n<\/main>\r\n\r\n<script>\r\n document.addEventListener('alpine:init', () => {\r\n Alpine.data('skillDisplay', () => ({\r\n skills: [{\r\n 'title': 'HTML',\r\n 'percent': '95',\r\n },\r\n {\r\n 'title': 'CSS',\r\n 'percent': '70',\r\n },\r\n {\r\n 'title': 'Tailwind CSS',\r\n 'percent': '90',\r\n },\r\n {\r\n 'title': 'JavaScript',\r\n 'percent': '70',\r\n },\r\n {\r\n 'title': 'Alpine JS',\r\n 'percent': '80',\r\n }, {\r\n 'title': 'PHP',\r\n 'percent': '65',\r\n }, {\r\n 'title': 'Laravel',\r\n 'percent': '75',\r\n }\r\n ],\r\n currentSkill: {\r\n 'title': 'HTML',\r\n 'percent': '95',\r\n }\r\n }));\r\n });\r\n<\/script>","author_type":"App\\User","author_id":4211,"collection_id":null,"fork_id":null,"votes":7,"score":"4.7","visits":37733,"popularity":3544,"slug":"circular-progress-bar-1","approved":1,"created_at":"2021-09-07T05:18:17.000000Z","updated_at":"2024-11-13T14:47:43.000000Z","downloads":719,"code_views":19336,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":4721,"model_type":"App\\Component","model_id":2233,"collection_name":"preview","name":"temp23537","file_name":"temp23537.png","mime_type":"image\/png","disk":"public","size":35692,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp23537___media_library_original_1280_957.png","temp23537___media_library_original_1070_799.png","temp23537___media_library_original_895_669.png","temp23537___media_library_original_749_559.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvT3VHQjdod2thbG1QWVY3VVl1YnNqZ2JTMVpZZlI3eU1aYUJoK0ZidkRWVXIySTlyRHVSR3luQUo4dHNmU3NlU1hZdm1SQVFRY0hnMUJSditESjRZTlhScHNiZmV2WHl5VUkxMDU3SEZpMUowL2RQUWRVOFE2V3F1bUVKSTdWOWZpc2Rob1JjRWVMU29WVzdtTkpkMkRXN0VGTUVkSytVbEtEdkpiSHFKU1dqT0F2bVZycVFwOTNOZU5LMTlEMFk3YWtDc1ZPUWNIMnBKdGFvZTRyU3V4eVdKL0dtNU43Z2trSG12akc0NCt0SzdDdzJrTS8vMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":4622,"created_at":"2021-09-07T05:18:22.000000Z","updated_at":"2021-09-07T05:18:23.000000Z","conversions_disk":"public","uuid":"ced047da-ec96-4dd8-ac72-4634e93661ab","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/4721\/temp23537.png","preview_url":""}],"author":{"id":4211,"name":"hafizhaziq.dev","slug":"hafizhaziqdev","bio":"I'm a programmer from Malaysia \ud83c\uddf2\ud83c\uddfe","avatar":"\/storage\/avatars\/oASrxO1XaDyHWteWdYRfZlJVJhw4WyeuEcYSu0xC.png","header":null,"created_at":"2021-07-12T14:54:42.000000Z","updated_at":"2023-05-20T15:58:13.000000Z"},"tags":[{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2233,"tag_id":5}},{"id":30,"name":{"en":"Progress"},"description":"A Progress component that indicates the status of an ongoing process. See below our collection of Progress elements that you can add directly to your Tailwind UI project.","meta_description":"Visit our Progress examples that you can add to your Tailwind UI project to indicate the status of an ongoing process.","slug":{"en":"progress"},"type":null,"order_column":29,"created_at":"2022-08-31T14:21:43.000000Z","updated_at":"2022-12-21T11:02:09.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2233,"tag_id":30}},{"id":59,"name":{"en":"List"},"description":"The Tailwind CSS List component is used to for display list of items or data. It can often be used for navigation or menus. See below our collection of List components that you can add directly to your Tailwind UI project.","meta_description":"Visit our Tailwind CSS List component examples that you can add to your web project to create awesome web apps.","slug":{"en":"list"},"type":null,"order_column":48,"created_at":"2023-10-05T07:47:36.000000Z","updated_at":"2023-10-05T07:47:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2233,"tag_id":59}}],"fork":null,"favorites":[{"id":5048,"name":"sandmor","slug":"sandmor","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/58484439?v=4","header":null,"created_at":"2021-09-14T22:51:36.000000Z","updated_at":"2021-09-14T22:51:36.000000Z","pivot":{"component_id":2233,"user_id":5048}},{"id":4570,"name":"thisara","slug":"thisara","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/d815d72cd77874dd3f4b0a6c40cf820a","header":null,"created_at":"2021-08-11T07:06:34.000000Z","updated_at":"2021-08-11T07:06:34.000000Z","pivot":{"component_id":2233,"user_id":4570}},{"id":4012,"name":"vinideep","slug":"vinideep","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/72923095?v=4","header":null,"created_at":"2021-06-25T10:41:54.000000Z","updated_at":"2021-06-25T10:41:54.000000Z","pivot":{"component_id":2233,"user_id":4012}},{"id":1434,"name":"Matt","slug":"matt","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27T13:11:58.000000Z","updated_at":"2020-10-27T13:11:58.000000Z","pivot":{"component_id":2233,"user_id":1434}},{"id":6729,"name":"EL-MOURABITsaber","slug":"el-mourabitsaber","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85076651?v=4","header":null,"created_at":"2022-01-31T00:44:41.000000Z","updated_at":"2022-01-31T00:44:41.000000Z","pivot":{"component_id":2233,"user_id":6729}},{"id":7282,"name":"K\u00e9vin Leroy","slug":"kevin-leroy","bio":null,"avatar":"\/storage\/avatars\/L1ryMeycICxBRwXhPYXxSMRGD9e47fI6D6IEwkLH.png","header":"\/storage\/headers\/jnrIXZYx6u9lP6zZosN0zvCW47dNOOFmcccCvl0S.webp","created_at":"2022-03-22T18:28:28.000000Z","updated_at":"2022-11-07T13:14:01.000000Z","pivot":{"component_id":2233,"user_id":7282}},{"id":10295,"name":"tanle25","slug":"tanle25","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/81272790?v=4","header":null,"created_at":"2022-12-28T13:41:19.000000Z","updated_at":"2022-12-28T13:41:19.000000Z","pivot":{"component_id":2233,"user_id":10295}},{"id":6917,"name":"RizqiSyahrendra","slug":"rizqisyahrendra","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/19841840?v=4","header":null,"created_at":"2022-02-19T12:10:03.000000Z","updated_at":"2022-02-19T12:10:03.000000Z","pivot":{"component_id":2233,"user_id":6917}},{"id":9931,"name":"Sergio","slug":"sergio-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/29ecc344c51cbed193a4d765dea4f09c","header":null,"created_at":"2022-11-29T15:29:22.000000Z","updated_at":"2022-11-29T15:29:22.000000Z","pivot":{"component_id":2233,"user_id":9931}},{"id":11619,"name":"Nelson Omueti","slug":"nelson-omueti","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/bf2d4ccfc920274512a10adcde573ae3","header":null,"created_at":"2023-03-26T07:02:04.000000Z","updated_at":"2023-03-26T07:02:04.000000Z","pivot":{"component_id":2233,"user_id":11619}},{"id":11730,"name":"erik hernandez","slug":"erik-hernandez","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a0d301f1e6c90d26709b53ea90611e67","header":null,"created_at":"2023-04-02T03:47:02.000000Z","updated_at":"2023-04-02T03:47:02.000000Z","pivot":{"component_id":2233,"user_id":11730}},{"id":9181,"name":"lucahaller","slug":"lucahaller","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/101752050?v=4","header":null,"created_at":"2022-09-27T06:21:23.000000Z","updated_at":"2022-09-27T06:21:23.000000Z","pivot":{"component_id":2233,"user_id":9181}},{"id":15863,"name":"okekolawolesunday009","slug":"okekolawolesunday009","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/88560941?v=4","header":null,"created_at":"2023-12-17T09:11:23.000000Z","updated_at":"2023-12-17T09:11:23.000000Z","pivot":{"component_id":2233,"user_id":15863}},{"id":4124,"name":"Lino93","slug":"lino93","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/83257872?v=4","header":null,"created_at":"2021-07-05T01:53:30.000000Z","updated_at":"2021-07-05T01:53:30.000000Z","pivot":{"component_id":2233,"user_id":4124}},{"id":17662,"name":"ayobamialaran","slug":"ayobamialaran","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/150065845?v=4","header":null,"created_at":"2024-03-18T12:48:57.000000Z","updated_at":"2024-03-18T12:48:57.000000Z","pivot":{"component_id":2233,"user_id":17662}},{"id":20271,"name":"Bryant35","slug":"bryant35","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74892205?v=4","header":null,"created_at":"2024-08-24T18:10:24.000000Z","updated_at":"2024-08-24T18:10:24.000000Z","pivot":{"component_id":2233,"user_id":20271}}]}" :edit="false"> Full screen Preview

hafizhaziq.dev

22 components Profile On

Tailwind CSS Circular Progress Bar

Community Rate

Related components