Bootstrap Progress Bar CSS Issuse-Twitter bootstrap

muthukrishnan91
December 3, 2017
171 views
1 vote
2 Answers

I am facing some difficulties with CSS, as i would like to do following things:

Remove spacing between each progress
Remove the thickness of the progress bar

Over all, something like this effects only progress bar thickness and space

between each progress bar

https://i.stack.imgur.com/Z3Y0P.jpg

Using the code below:

jQuery(document).ready(function ($) {

    $('.skillbar').each(function () {
        $(this).find('.skillbar-bar').animate({
            width: $(this).attr('data-percent')
        }, 1500);
    });
    
    $(".skillbar-title em").html(function(index, old) {
        return old.replace(/(bw+)$/, '<span>$1</span>');
    });

});

.skillbar  {
	position:  relative;
	display:  block;
	margin-top: 50px;
	margin-bottom:  20px;
	width:  100%;
	background:  #ddd;
	height:  42px;
	border-radius:  2px;
	-moz-border-radius:  2px;
	-webkit-border-radius:  2px;
	-webkit-transition:  0.4s linear;
	-moz-transition:  0.4s linear;
	-ms-transition:  0.4s linear;
	-o-transition:  0.4s linear;
	transition:  0.4s linear;
	-webkit-transition-property:  width,  background-color;
	-moz-transition-property:  width,  background-color;
	-ms-transition-property:  width,  background-color;
	-o-transition-property:  width,  background-color;
	transition-property:  width,  background-color;
 }

.skillbar-title  {
	position:  absolute;
	top:  0;
	left:  0;
	font-weight:  bold;
	font-size:  13px;
	color:  #333;
	background:  #6adcfa;
	-webkit-border-top-left-radius:  2px;
	-webkit-border-bottom-left-radius:  2px;
	-moz-border-radius-topleft:  2px;
	-moz-border-radius-bottomleft:  2px;
	border-top-left-radius:  2px;
	border-bottom-left-radius:  2px;
 }

.skillbar-title em  {
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
	color: #999;
	text-transform: lowercase;
	position: relative;
	margin-top: -35px;
	display:  block;
	height:  15px;
	line-height:  25px;
	-webkit-border-top-left-radius:  2px;
	-webkit-border-bottom-left-radius:  2px;
	-moz-border-radius-topleft:  2px;
	-moz-border-radius-bottomleft:  2px;
	border-top-left-radius:  2px;
	border-bottom-left-radius:  2px;
 }

.skillbar-bar  {
	height:  42px;
	width:  0px;
	-webkit-border-top-left-radius:  2px;
	-webkit-border-bottom-left-radius:  2px;
	-moz-border-radius-topleft:  2px;
	-moz-border-radius-bottomleft:  2px;
	border-top-left-radius:  2px;
	border-bottom-left-radius:  2px;
 }

.skillbar-percent  {
	position:  absolute;
	right:  10px;
	top:  0;
	font-size:  12px;
	height:  42px;
	line-height:  42px;
	color:  #444;
	color:  rgba(0, 0, 0, 0.4);
 }
 
.no-percent .skillbar-percent  {
	display: none;
}

.skillbar-title em span {
	color: #333;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-left: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<p>

<div class="skillbar" data-percent="50%">
   <div class="skillbar-title" style="background: #3498db;"><em>HTML</em></div>
   <div class="skillbar-bar" style="background: #3498db;"></div>
   <div class="skillbar-percent">50%</div>
</div>
<br />
<div class="skillbar" data-percent="60%">
   <div class="skillbar-title" style="background: #2ecc71;"><em>CSS</em></div>
   <div class="skillbar-bar" style="background: #2ecc71;"></div>
   <div class="skillbar-percent">60%</div>
</div>
<br />
<div class="skillbar" data-percent="80%">
   <div class="skillbar-title" style="background: #9b59b6;"><em>PHP</em></div>
   <div class="skillbar-bar" style="background: #9b59b6;"></div>
   <div class="skillbar-percent">80%</div>
</div>
<br />
<div class="skillbar" data-percent="90%">
   <div class="skillbar-title" style="background: #e74c3c;"><em>JQUERY</em></div>
   <div class="skillbar-bar" style="background: #e74c3c;"></div>
   <div class="skillbar-percent">90%</div>
</div>

Answers

You have to decrease height for .skillbar and .skillbar-bar, with a little margin fixes and you could have something like you want:

jQuery(document).ready(function ($) {
    $('.skillbar').each(function () {
        $(this).find('.skillbar-bar').animate({
            width: $(this).attr('data-percent')
        }, 1500);
    });
    $(".skillbar-title em").html(function(index, old) {
        return old.replace(/(bw+)$/, '<span>$1</span>');
    });
});

.skillbar {
    position: relative;
    display: block;
    margin-bottom: 30px;
    width: 100%;
    background: #ddd;
    height: 15px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}
.skillbar.first {
    margin-top: 30px;
}
.skillbar-title {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    font-size: 13px;
    color: #333;
    background: #6adcfa;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.skillbar-title em {
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    color: #999;
    text-transform: lowercase;
    position: relative;
    margin-top: -20px;
    display: block;
    height: 15px;
    line-height: 25px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.skillbar-bar {
    height: 15px;
    width: 0px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.skillbar-percent {
    position: absolute;
    right: 10px;
    top: 4px;
    font-size: 12px;
    height: 42px;
    line-height: 42px;
    color: #444;
    color: rgba(0, 0, 0, 0.4);
}
.no-percent .skillbar-percent {
    display: none;
}
.skillbar-title em span {
    color: #333;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="skillbar first" data-percent="50%">
    <div class="skillbar-title" style="background: #3498db;"><em>HTML</em>
    </div>
    <div class="skillbar-bar" style="background: #3498db;"></div>
    <div class="skillbar-percent">50%</div>
</div>
<div class="skillbar" data-percent="60%">
    <div class="skillbar-title" style="background: #2ecc71;"><em>CSS</em>
    </div>
    <div class="skillbar-bar" style="background: #2ecc71;"></div>
    <div class="skillbar-percent">60%</div>
</div>
<div class="skillbar" data-percent="80%">
    <div class="skillbar-title" style="background: #9b59b6;"><em>PHP</em>
    </div>
    <div class="skillbar-bar" style="background: #9b59b6;"></div>
    <div class="skillbar-percent">80%</div>
</div>
<div class="skillbar" data-percent="90%">
    <div class="skillbar-title" style="background: #e74c3c;"><em>JQUERY</em>
    </div>
    <div class="skillbar-bar" style="background: #e74c3c;"></div>
    <div class="skillbar-percent">90%</div>
</div>

- user9049814
- December 4, 2017 at 9:21 am
- 0 votes
0
you have to remove height and line-height from .skillbar-percent and .skillbar.
Also needs to remove line breaks(<br>).
Reduce height of the .skillbar-bar

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.