How to create a progress bar using HTML and CSS? Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. To make that progress bar responsive you will need JavaScript.In this article, we will learn to create progress bars using HTML and CSS. Refer: How to Create Progress Bar using JavaScript? Approach:Start with HTML structure, using divs for each skill, and semantic tags for title and skill names.Create containers with background color, width, and border radius for each skill.Inside containers, define progress bars with customized styles.Apply specific widths using classes like "html" and "php" to represent skill levels.Use CSS to style HTML elements, including font size for '<p>' tags and styles for containers and progress bars.Example: html <!DOCTYPE html> <html> <head> <style> p { font-size: 20px; } .container { background-color: rgb(192, 192, 192); width: 80%; border-radius: 15px; } .skill { background-color: rgb(116, 194, 92); color: white; padding: 1%; text-align: right; font-size: 20px; border-radius: 15px; } .html { width: 80%; } .php { width: 60%; } </style> </head> <body> <h1>My Skills</h1> <p>HTML</p> <div class="container"> <div class="skill html">80%</div> </div> <p>PHP</p> <div class="container"> <div class="skill php">60%</div> </div> </body> </html> Output: Comment More infoAdvertise with us R riyakalra59 Follow Improve Article Tags : Web Technologies Write From Home How To Web Templates Explore HTML Examples 6 min read HTML Basic ExamplesDifference between HTML and CSS 4 min read What are physical tags in HTML? 5 min read Container and Empty Tags in HTML 6 min read How to Add Background Image in HTML? 3 min read How to define a list item in HTML5? 2 min read Difference between semantic and non-semantic elements 2 min read HTML Color Picker 3 min read How to set the name for the object in HTML5? 2 min read How to add space between elements in HTML? 4 min read How to create a clickable button in HTML ? 1 min read HTML Structural ExamplesHow to escape everything in a block in HTML ? 1 min read How to Center a Div within another Div? 4 min read How to create a moving div using JavaScript ? 2 min read How to stretch div to fit the container ? 2 min read How to Make a Div Horizontally Scrollable using CSS? 3 min read How to hide text going beyond DIV element using CSS ? 2 min read How to read all spans of a div dynamically ? 3 min read How to create horizontal scrollable sections using CSS ? 3 min read HTML Hyperlinks ExamplesHow to link back out of a folder using the a-href tag? 2 min read HTML <a> ping Attribute 1 min read HTML <link> disabled attribute 1 min read What is the use of “#†symbol in link URL? 2 min read How to create a link with a media attribute in HTML5 ? 1 min read How to specify the source URL of the quote using HTML5 ? 1 min read How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5 ? 2 min read How to specify the hyperlink target for the area of an image in HTML5 ? 1 min read How to make a HTML link that forces refresh ? 1 min read How to set the language of text in the linked document in HTML5 ? 1 min read How to specify what media/device the target URL is optimized for ? 3 min read How to specify URL of resource to be used by the object in HTML5 ? 1 min read How to use Anchor tag as submit button ? 3 min read HTML Table ExamplesHTML <td> nowrap Attribute 1 min read HTML | tbody charoff Attribute 2 min read HTML | <tr> charoff Attribute 1 min read HTML | <td> scope Attribute 1 min read HTML | <td> rowspan Attribute 1 min read HTML | <col> valign Attribute 1 min read HTML | <thead> align Attribute 1 min read HTML | <thead> valign Attribute 1 min read Create Header Cells for Columns, Rows, or Groups in HTML 1 min read How to group header content of a table using HTML5 ? 1 min read How to implement single row select and delete using DataTables plugin ? 3 min read How to define one or more header cells a cell is related to in HTML ? 1 min read How to set the number of rows a table cell should span in HTML ? 2 min read How To Create a Table With Fixed Header and Scrollable Body? 3 min read HTML Form ExamplesHow to set an alternate text for area in HTML5 ? 2 min read How to specify one or more forms the object belongs to ? 2 min read How to specify one or more forms the keygen element belongs to ? 2 min read How to turn on/off form autocompletion in HTML ? 2 min read How to specify that a group of related form elements should be disabled using HTML? 1 min read How to specify how form-data should be encoded when submitting to server ? 2 min read How to specify the URL that will process the data supplied through input(s) when the form is submitted? 1 min read How to specify one or more forms the label belongs to ? 3 min read How to specify multiple forms the select field belongs to in HTML ? 2 min read How to change the <input> type? 1 min read How to specify which form element a label is bound to ? 2 min read How to create a multiline input control text area in HTML5 ? 1 min read How to create form validation by using only HTML ? 2 min read HTML Frame ExamplesHTML <iframe> referrerpolicy Attribute 2 min read How to divide an HTML page into four parts using frames ? 2 min read How to place a div inside an iframe for IE ? 2 min read How to enable extra set of restrictions for content in an iframe element in HTML5 ? 2 min read How to navigate URL in an iframe with JavaScript ? 1 min read HTML Media BasedHow to animate a straight line in linear motion using CSS ? 2 min read How to specify the media type of the script in HTML5 ? 1 min read How to display video controls in HTML5 ? 3 min read How to mute video using HTML5 ? 1 min read How to add controls to an audio in HTML5 ? 2 min read Create Scanning Animation Loader using HTML & CSS 2 min read How to specify media type of data specified in data attribute in HTML5 ? 1 min read How to set the height and width of the video player in HTML5 ? 2 min read How to check whether an image is loaded or not ? 2 min read How to specify the type of the media resource in HTML5 ? 1 min read How to Create Image Hovered Detail using HTML & CSS? 3 min read How to define media type of style tag in HTML5 ? 2 min read How to set multiple media resources for elements in HTML5 ? 2 min read HTML QuestionsHow to set a single line break in HTML5 ? 1 min read How to create a progress bar using HTML and CSS? 1 min read How to create Perspective Text using HTML & CSS ? 2 min read How to isolate a part of text that may be formatted in a different direction using HTML5 ? 1 min read Design an Event Webpage using HTML and CSS 5 min read How to Skew Text on Hover using HTML and CSS? 2 min read How to create a slideshow with HTML and CSS ? 3 min read How to specify that an option-group should be disabled in HTML5 ? 1 min read How to disable the drop-down list in HTML5 ? 2 min read How to define scalar measurement within a given range in HTML5 ? 1 min read How to set the security algorithm of key in HTML5 ? 1 min read How to set minimum and maximum value of range in HTML5 ? 1 min read Like