Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Animated-progress bar in Bootstrap

Ethan Karla 588 28 Jul 2021

How to make animated-progress bar in Bootstrap? State with the help of example.

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

Animated-progress bars in Bootstrap are used to show how much progress has been completed by a user in any task.

Let's have an example to demonstrate how to use progress-animated bar in Bootstrap :

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

  <title>Bootstrap Example</title>

  <meta charset='utf-8'>

  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>

</head>

<body>

<div class='container'>

  <h2>Animated Progress Bar</h2>

  <div class='progress'>

    <div class='progress-bar progress-bar-info progress-bar-striped active' role='progressbar' aria-valuenow='70' aria-valuemin='0' aria-valuemax='100' style='width:70%'>

        70% Complete

    </div>

  </div>

</div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising