• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

This tutorial discusses about Bootstrap progress bars. 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.

 Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in
 Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

1)Creating a basic progress bar:
? Add a <div> with a class of .progress.
? Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
 ? Add a style attribute with the width expressed as a percentage. Say for example, style="60%"; indicates that the
progress bar was at 60%.

Let us see an example below:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% Complete</span>
</div> </div>

2)Creating a progress bar with different styles:
 ? Add a <div> with a class of .progress.
 ? Next, inside the above <div>, add an empty <div> with a class of .progress-bar and classprogress-bar-* where *
could be success, info, warning, danger.
   Add a style attribute with the width expressed as a percentage. Say for example, style="60%";
 indicates that the progress bar was at 60%.

 Let us see an example below:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span> </div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
<span class="sr-only">30% Complete (info)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">20%Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>


Other types of progressbar are
1)Striped Progress Bar :Add .progress-striped class instead of .progress-defult
2)Animated Progress Bar: Add .progress-striped active class instead of .progress-defult
3)Stacked Progress Bar:You can even stack multiple progress bars. Place the multiple progress bars into the
same .progressto stack them as seen in the following example:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% Complete</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
<span class="sr-only">30% Complete (info)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
<span class="sr-only">20%Complete (warning)</span>
</div>
</div>