Animated Progress Bar using HTML & CSS

0

Animated Progress Bar using HTML & CSS

Hello developers, today in this blog, you'll learn to create an Animated Progress Bar using HTML & CSS.

The progress bar presents you with beautiful and visually shown statistics. The progress is a graphical control element used to visualize the progress of an extended computer operation, such as a download, transfer, or installation.

In this blog(Animated Progress Bar), there is a bar with the percentage on the top. The percentage represents the completed states of the bar. On clicking every percentage, the progress bar expands and contracts based on the percentage that you click. For each percentage, the color of the progress bar changes based on the status of the progress bar.

The source code of this Animated Progress Bar is given below, if you want the source code of this program, you can copy it. You can use this Animated Progress Bar with your creativity and can take this project to the next level.

Animated progress Bar [Source Code]

To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Animated Progress Bar || Learningrobo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <input type="radio" class="radio" name="progress" value="five" id="five"> <label for="five" class="label">5%</label> <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked> <label for="twentyfive" class="label">25%</label> <input type="radio" class="radio" name="progress" value="fifty" id="fifty"> <label for="fifty" class="label">50%</label> <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive"> <label for="seventyfive" class="label">75%</label> <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred"> <label for="onehundred" class="label">100%</label> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension. 


body {
  font: 15px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #333;
}

.container {
  margin: 60px auto;
  width: 400px;
  text-align: center;
}

.container .progress {
  margin: 0 auto;
  width: 400px;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  height: 16px;
  border-radius: 4px;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#five:checked ~ .progress > .progress-bar {
  width: 5%;
  background-color: #f63a0f;
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 25%;
  background-color: #f27011;
}

#fifty:checked ~ .progress > .progress-bar {
  width: 50%;
  background-color: #f2b01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 75%;
  background-color: #f2d31b;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}

.radio {
  display: none;
}

.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}

.radio:checked + .label {
  color: #E44D26;
  background: #000;
}
.credit a{
  text-decoration: none;
  color: #E44D26;
  font-weight: 900;
  }

  .credit {
    color: #fff;
    margin-top: 20px;
    text-align: center;
  }
We hope you would like this Animated Progress Bar using HTML & CSS.

Thank you for reading our blog. If you face any problem creating this Animated Progress Bar using HTML & CSS, then contact us or comment us. We'll try to provide the solution to your problem as soon as possible.

Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome