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

How to Create a Bootable Pendrive for Installing Windows

For installing windows to PC it is required to make a bootable cd or pendrive.Windows can be install in OS by two ways . 1.By using Pendrive. 2.OR by using DVD First one i.e using pendrive to install windows is more acceptable because installing windows through pendrive is faster than installing window

Specification of APPO A37

Leading Chinese Mobile company APPO has launched APPO A37 with mind blowing specification . The sell of this mobile will start from 1st July 2016. This is APPO A37 is high tech mobile with all specification installed in it . This mobile  is eqquiped with 8mp rear and 5 mp front camera with expandable 128 Gb memory storage .APPO A37 comes with mediatech    MT6750 processor and 2Gb of RAM . This phone is capable of taking high Quality pictures with its 8 MP Camera . APPO A37 will be available at RS 11990 to the customers . Highlights - 1.2GHz MSM8916 Snapdragon Quad-Core Processor - 2GB RAM With 16GB ROM - 5 Inch HD IPS TFT Display With 293PPI - Dual Nano SIM - 8 MP Rear Camera With LED Flash - 5 MP Front Camera - 4G - Bluetooth 4.0 - Wi-Fi - 2630 MAh Battery

2016 Aternative of Google Adsense for Advertising On Website or Blog .

Google Adsense is one of the most trustworthy and genuine way of earning making earning from website through displaying adds on it .Any one can earn very much good amount of  money through google adsense but to start earning from google adsense you must make sure that your website follows all the guidelines for getting accepted by google adsense. Getting approval from google adsense is lengthy process .First of all your website for which you are applying should be six month old for the user of India and china  and should also follow each guidelines from adsense policy . Making all acceptance for adsense approval is very hard and every one can not get it very easily it will take atleast 7 to 8 month .