Creating Progress bars
- Progress bars: Progress bars indicate the completion status of a task, such as loading a webpage or submitting a form. Here’s an example:
HTML:
Creating Progress bars
<div class="progress-bar">
<div class="progress"></div>
</div>
CSS:
.progress-bar {
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
.progress {
width: 50%;
height: 100%;
background-color: #4CAF50;
border-radius: 10px;
}
In this example, we have a div with the class “progress-bar”, which acts as the outer container for the progress bar. We set its width and height, and add a background color and border radius to give it a rounded look. We then create a nested div with the class “progress”, which represents the actual progress of the task. We set its width to 50% to show that it is halfway completed, and set its background color and border radius to match the outer container.
- Navigation bars: Navigation bars provide a menu for navigating a website. Here’s an example:
HTML:
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
In this example, we have a nav element with the class “navbar”, which acts as the container for the navigation bar. We set its background color and add an overflow property to ensure that any overflowing content is hidden. We then create an unordered list with the links for the menu items, and set its margin and padding to 0 to remove any unwanted spacing. We float each list item to the left and set its display to block, and style the link inside each list item with color, padding, and text alignment. Finally, we add a hover effect to the links to change their background color when the user hovers over them.
These are just two examples of the many ways bars can be created and styled in CSS.