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>
2
Answers
You have to decrease
height
for.skillbar
and.skillbar-bar
, with a littlemargin
fixes and you could have something like you want:you have to remove
height
andline-height
from.skillbar-percent
and.skillbar
.Also needs to remove line breaks(
<br>
).Reduce
height
of the.skillbar-bar