How can i add this block to my sit?

Could anybody help how can i do this in html with css?

Yes, try: HTML


CSS :

Why do you say the same thing again?

Cool plugin wanna try it

Trying this now, this seems cool

03-03-2017, 04:06 PM

Geo6200 Wrote: Yes, try: HTML

Code:

<div class="progress-bar blue"></div>

CSS :

Code:

.progress-bar {
  width: 300px;
  height: 24px;
  padding: 4px;
  background-color: #191919;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  -moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}

.progress-bar:before {
  content: '';
  display: block;
  position: absolute;
  width: 200px;
  height: 24px;
  background: #999;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
}

nice to share

03-03-2017, 04:06 PM

Geo6200 Wrote: Yes, try: HTML

Code:

<div class="progress-bar blue"></div>

CSS :

Code:

.progress-bar {
  width: 300px;
  height: 24px;
  padding: 4px;
  background-color: #191919;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
  -moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}

.progress-bar:before {
  content: '';
  display: block;
  position: absolute;
  width: 200px;
  height: 24px;
  background: #999;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
}

Thank you You helped me also... nice share..

No problem kahraman451 and abelas ! If you have other problems, I am available.

Just a note, if this is like your resume site or something...

People who hire (me) think that progress bars to define how good you are at something are fucking stupid. I mean maybe a progress bar that is like split into 3, crap, okay, and great. That might work.

Otherwise, people think it's retarded when you say you are 63.5% good at Python or whatever. Looks cool and that, but it makes you look stupid.