Online: 10242
Online: 10242
Online: 10242
A progress bar is a graphical control element used to visualize the progression of an extended computer operation, Progress bars use CSS3 transitions and animations to achieve some of their effects. The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.
<style>
.meter {
height: 20px;
position: relative;
background: green;
border-radius: 25px;
padding: 10px;
text-align:center;
}
</style>
</head>
<body>
<div class="meter">
TechFunda
</div>
</body>
In the above code snippet we have defined the background of the progress bar using different properties
output
Creating progress bar
We can create progress bar by using css properties
<style>
.meter {
height: 20px;
position: relative;
background: green;
border-radius: 25px;
padding: 10px;
text-align:center;
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color:blue;
}
</style>
</head>
<body>
<p>Creating Progress bar</p>
<div class="meter">
<span style="width: 30%"></span>
</div>
</body>
In the above code snippet we have created progress bar using meter, we have defined different properties in the meter to define the background of the progress bar, span is used to define the progress bar by the given properties border-radius
output
