progressbar.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .ui-progressbar {
  2. height: 1.2em;
  3. text-align: left;
  4. position: relative;
  5. overflow: hidden;
  6. }
  7. .ui-progressbar-determinate .ui-progressbar-value {
  8. height: 100%;
  9. width: 0%;
  10. position: absolute;
  11. display: none;
  12. border: 0 none;
  13. }
  14. .ui-progressbar-determinate .ui-progressbar-value-animate {
  15. -webkit-transition: width 1s ease-in-out;
  16. -moz-transition: width 1s ease-in-out;
  17. -o-transition: width 1s ease-in-out;
  18. transition: width 1s ease-in-out;
  19. }
  20. .ui-progressbar-determinate .ui-progressbar-label {
  21. text-align: center;
  22. height: 100%;
  23. width: 100%;
  24. position: absolute;
  25. display: none;
  26. font-weight: bold;
  27. }
  28. .ui-progressbar-indeterminate {
  29. height: .5em;
  30. }
  31. .ui-progressbar-indeterminate .ui-progressbar-value {
  32. border: 0 none;
  33. }
  34. .ui-progressbar-indeterminate .ui-progressbar-value::before {
  35. content: '';
  36. position: absolute;
  37. background-color: inherit;
  38. top: 0;
  39. left: 0;
  40. bottom: 0;
  41. will-change: left, right;
  42. -webkit-animation: ui-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  43. animation: ui-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  44. }
  45. .ui-progressbar-indeterminate .ui-progressbar-value::after {
  46. content: '';
  47. position: absolute;
  48. background-color: inherit;
  49. top: 0;
  50. left: 0;
  51. bottom: 0;
  52. will-change: left, right;
  53. -webkit-animation: ui-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  54. animation: ui-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  55. -webkit-animation-delay: 1.15s;
  56. animation-delay: 1.15s;
  57. }
  58. @-webkit-keyframes ui-progressbar-indeterminate-anim {
  59. 0% {
  60. left: -35%;
  61. right: 100%; }
  62. 60% {
  63. left: 100%;
  64. right: -90%; }
  65. 100% {
  66. left: 100%;
  67. right: -90%; }
  68. }
  69. @keyframes ui-progressbar-indeterminate-anim {
  70. 0% {
  71. left: -35%;
  72. right: 100%; }
  73. 60% {
  74. left: 100%;
  75. right: -90%; }
  76. 100% {
  77. left: 100%;
  78. right: -90%; }
  79. }
  80. @-webkit-keyframes ui-progressbar-indeterminate-anim-short {
  81. 0% {
  82. left: -200%;
  83. right: 100%; }
  84. 60% {
  85. left: 107%;
  86. right: -8%; }
  87. 100% {
  88. left: 107%;
  89. right: -8%; }
  90. }
  91. @keyframes ui-progressbar-indeterminate-anim-short {
  92. 0% {
  93. left: -200%;
  94. right: 100%; }
  95. 60% {
  96. left: 107%;
  97. right: -8%; }
  98. 100% {
  99. left: 107%;
  100. right: -8%; }
  101. }