s3multipart.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /*
  2. CSS-Tricks Example
  3. by Chris Coyier
  4. http://css-tricks.com
  5. https://css-tricks.com/examples/ProgressBars/
  6. */
  7. .meter {
  8. height: 20px; /* Can be anything */
  9. position: relative;
  10. margin: 60px 0 20px 0; /* Just for demo spacing */
  11. background: #555;
  12. -moz-border-radius: 25px;
  13. -webkit-border-radius: 25px;
  14. border-radius: 25px;
  15. padding: 5px;
  16. -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  17. -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  18. box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  19. }
  20. .meter > span {
  21. display: block;
  22. height: 10px;
  23. -webkit-border-top-right-radius: 8px;
  24. -webkit-border-bottom-right-radius: 8px;
  25. -moz-border-radius-topright: 8px;
  26. -moz-border-radius-bottomright: 8px;
  27. border-top-right-radius: 8px;
  28. border-bottom-right-radius: 8px;
  29. -webkit-border-top-left-radius: 20px;
  30. -webkit-border-bottom-left-radius: 20px;
  31. -moz-border-radius-topleft: 20px;
  32. -moz-border-radius-bottomleft: 20px;
  33. border-top-left-radius: 20px;
  34. border-bottom-left-radius: 20px;
  35. background-color: rgb(43, 194, 83);
  36. background-image: -webkit-gradient(
  37. linear,
  38. left bottom,
  39. left top,
  40. color-stop(0, rgb(43, 194, 83)),
  41. color-stop(1, rgb(84, 240, 84))
  42. );
  43. background-image: -moz-linear-gradient(
  44. center bottom,
  45. rgb(43, 194, 83) 37%,
  46. rgb(84, 240, 84) 69%
  47. );
  48. -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
  49. inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  50. -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
  51. inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  52. box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
  53. inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  54. position: relative;
  55. overflow: hidden;
  56. }
  57. .meter > span:after, .animate > span > span {
  58. content: "";
  59. position: absolute;
  60. top: 0; left: 0; bottom: 0; right: 0;
  61. background-image: -webkit-gradient(linear, 0 0, 100% 100%,
  62. color-stop(.25, rgba(255, 255, 255, .2)),
  63. color-stop(.25, transparent), color-stop(.5, transparent),
  64. color-stop(.5, rgba(255, 255, 255, .2)),
  65. color-stop(.75, rgba(255, 255, 255, .2)),
  66. color-stop(.75, transparent), to(transparent)
  67. );
  68. background-image: -moz-linear-gradient(
  69. -45deg,
  70. rgba(255, 255, 255, .2) 25%,
  71. transparent 25%,
  72. transparent 50%,
  73. rgba(255, 255, 255, .2) 50%,
  74. rgba(255, 255, 255, .2) 75%,
  75. transparent 75%,
  76. transparent
  77. );
  78. z-index: 1;
  79. -webkit-background-size: 50px 50px;
  80. -moz-background-size: 50px 50px;
  81. -webkit-animation: move 2s linear infinite;
  82. -webkit-border-top-right-radius: 8px;
  83. -webkit-border-bottom-right-radius: 8px;
  84. -moz-border-radius-topright: 8px;
  85. -moz-border-radius-bottomright: 8px;
  86. border-top-right-radius: 8px;
  87. border-bottom-right-radius: 8px;
  88. -webkit-border-top-left-radius: 20px;
  89. -webkit-border-bottom-left-radius: 20px;
  90. -moz-border-radius-topleft: 20px;
  91. -moz-border-radius-bottomleft: 20px;
  92. border-top-left-radius: 20px;
  93. border-bottom-left-radius: 20px;
  94. overflow: hidden;
  95. }
  96. .animate > span:after {
  97. display: none;
  98. }
  99. @-webkit-keyframes move {
  100. 0% {
  101. background-position: 0 0;
  102. }
  103. 100% {
  104. background-position: 50px 50px;
  105. }
  106. }
  107. .orange > span {
  108. background-color: #f1a165;
  109. background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  110. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  111. background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
  112. }
  113. .red > span {
  114. background-color: #f0a3a3;
  115. background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
  116. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
  117. background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
  118. }
  119. .nostripes > span > span, .nostripes > span:after {
  120. -webkit-animation: none;
  121. background-image: none;
  122. }