forum

home / developersection / forums / animated-progress bar in bootstrap

Ask Question

Animated-progress bar in Bootstrap

Ethan Karla 460 28-Jul-2021

How to make animated-progress bar in Bootstrap? State with the help of example.
bootstrap bootstrap 
Updated on 28-Jul-2021
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.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

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
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy