Progress Bar CSS


/ Published in: CSS
Save to your folder(s)

Simple Progress Bars with only CSS


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.