Skip to main content

Progress Bar Through BootStrap


This blog is to teach you all my reader to create a progress through a BootStrap.In this tutorial i will teach you to make different type of progress bar which will you all be able to make through my BootStrap after reading my tutorial .

For this tutorial you should have a basic knowledge of css ,javascript and Html.It is not necessary that you should be master in css,javaScript and html. But really be sure that after reading this tutorial you are going to do a work which will make you feel like master of css and javascript .


There will be question in your mind what the heck is this BootStrap ? Don't worry your question will be soon answered.

What is BootStrap ?

I will give a short explanation of BootStrap and in detail i will be going in my next tutorial.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Default progress bar look like this .

70% Complete
Let's get suit up for the main topic for which i have set lot of background .For making progress bar for your website . You must know the css class that you should add in your <div class=" class_name"> </div> tag .Their are two type of progress bar which are listed below.
  1. Colored Progress Bars
  2. Stripped Progress Bars
First of all i will talk about coloured progress bar.They have many class depending on the color used.
  1. .progress-bar-success
  2. .progress-bar-info
  3. .progress-bar-warning
  4. .progress-bar-danger
To use this classes apply class .progress-bar followed by any of this class .progress-bar-success Example class="progress-bar progress-bar-success" Below is the result for various type of progress bar shown below.
70% Complete (success example)
60% Complete (info example)
40% Complete (warning example)
50% Complete (danger example)
Code for the above result is below . Example
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70"
  aria-valuemin=
"0" aria-valuemax="100" style="width:70%">

    70% Complete (success example)
  </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:60%">

    60% Complete (info example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
  aria-valuemin=
"0" aria-valuemax="100" style="width:40%">

    40% Complete (warning example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50"
  aria-valuemin=
"0" aria-valuemax="100" style="width:50%">

    50% Complete (danger example)
  </div>
</div>

Striped Progress Bar

Bellow are the Example for Striped progress Bar.
70% Complete (success example)
60% Complete (info example)
40% Complete (warning example)
50% Complete (danger example)

For getting the above result we have to add a class class="progress-bar progress-bar-success" followed by "progress-bar-striped" Example class="progress-bar progress-bar-success progress-bar-striped

Code for the Striped-progress-bar is given below

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

    70% Complete (success example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (info example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (warning example)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (danger example)
  </div>
</div>


NOW, Animated progress bar .

For the Animated progress bar we have to add one more class i.e .active.
Example class="progress-bar progress-bar-striped active"

60%(animated progress bar)


Code for above Animated progress bar is
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow=
"60" aria-valuemin="0" aria-valuemax="100" style="width:60%">

    60% (Animated progress bar )
  </div>
</div>

Comments

Popular posts from this blog

Samsung Galaxy On8 full review

Samsung launched its most awaited device Samsung Galaxy On8.It will be available only on Flipkart the E-commerce giant.This phone will be available on Flipkart from October 2nd midnight during BigBillion day sale.

Earn money online for free

In this era of internet it is very easy to earn extra money without doing much hard work.We can earn Rs 10000/- to Rs 50000/- per month just spending few minutes on internet . There are many sites which give us money for viewing adds , reading email , clicking on adds, playing game , making a survey etc .

5 Important Facts about facebook that every one should know.

Today, I was using facebook and and I realised that I was just using it and but actually was not knowing any thing about it. For that I started digging into it and I found some important fact that very few people know and talk. These facts were small but important in terms of user experience.

1. How does Facebook generate its revenue?
Most of the revenue is generated from the advertisement.But comparatively very less than google. Because of low CTR (Click through rate).Means that if 80000 users are clicking on adds among 1million searches on google.  400 people click on ads on Facebook among 1million.

One more source of income is from selling of user’s data to third parties.
You will be amazed by seeing the revenue growth of the Facebook from starting
Year Revenue Growth 2004 $0.4 — 2005 $9 2150% 2006 $48 433% 2007 $153 219% 2008 $280 83% 2009