Advanced Search

Progress Bar CSS

/ Published in: CSS
Save to your folder(s)
Simple Progress Bars with only CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .progress-bar {
  2.   width: 300px;
  3.   height: 24px;
  4.   padding: 4px;
  5.   background-color: #191919;
  6.   border-radius: 16px;
  7.   -webkit-border-radius: 16px;
  8.   -moz-border-radius: 16px;
  9.   box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
  10.   -webkit-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
  11.   -moz-box-shadow: inset 0 1px 2px #000,0 1px 0 #2b2b2b;
  12. }
  13.  
  14. /*Parte interna de la barra */
  15. .progress-bar:before {
  16.   content: '';
  17.   display: block;
  18.   position: absolute;
  19.   width: 200px;
  20.   height: 24px;
  21.   background: #999;
  22.   border-radius: 12px;
  23.   -webkit-border-radius: 12px;
  24.   -moz-border-radius: 12px;
  25.   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
  26.   inset 0 -1px 3px rgba(0, 0, 0, 0.4),0 1px 1px #000;
  27.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),inset 0 -1px 3px rgba(0, 0, 0, 0.4),
  28.   0 1px 1px #000;
  29.   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),inset 0 -1px 3px rgba(0, 0, 0, 0.4),
  30.   0 1px 1px #000;
  31. }
  32.  
  33. /* las barras inclinadas */
  34. .progress-bar:after {
  35.   content: '|||||||||||||';
  36.   display: block;
  37.   position: absolute;
  38.   width: 200px;
  39.   height: 24px;
  40.   overflow: hidden;
  41.   border-radius: 12px;
  42.   -webkit-border-radius: 12px;
  43.   -moz-border-radius: 12px;
  44.   transform: skewX(-30deg);
  45.   -webkit-transform: skewX(-30deg);
  46.   -moz-transform: skewX(-30deg);
  47.   -o-transform: skewX(-30deg);
  48.   font:bold 120px/80px sans-serif;
  49.   letter-spacing: -6px;
  50.   color: #000;
  51.   opacity: 0.06;
  52. }
  53.  
  54. /* el color de la barra */
  55. .azul:before {
  56.   background: #099;
  57.   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));
  58.   background: -moz-linear-gradient(top, #099, #006A6B);
  59. }

URL: www.elclubdelprogramador.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.