Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Progress bar

    @shristi.nawani
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 216
    Comment on it

    Progress Bar Progress bar is used for up-to-date feedback from the user's action, it can also be made a user indeterminate.This bar will be helpful when the length of the task is unknown for the user. If you are using progress bar to show real progress so the horizontal bar will be more appropriate. Basic purpose of using the bar is to shows the progression of a task.

    Basic Example of Progress Bar

      <!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
          <div class+"progress-bar progress-bar-success progress-bar-striped" style="width:99%">
      <span>100% Complete(success)</span>
      </div>

    <div class="progress-bar progress-bar-warning progress-bar-striped Report" style="width: 60%">
      <span>60% Complete</span>
      </div>

     <div class="progress-bar progress-bar-striped active Report" style="width: 40%">
     <span>40% (warning)</span>
     </div>

      <div class="progress-bar progress-bar-danger Report" style="width: 20%">
      <span>10% (danger)</span>
      </div>
      </div>

    Output of above Code Example of Progress Bar

    100% Complete(success)


    60% Complete


    40% (warning)


    10% (danger)

    html
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: