CSS3 > Progress bars

Progress bars in CSS3

How to create progress bars in CSS


Progress bar

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>

Progress bar

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

 Views: 533 | Post Order: 140



Write for us