Posted By

envane21 on 12/03/15


Tagged

bar progress


Versions (?)

Progress Bar


 / Published in: CSS
 

Progress Bar with easing

  1. html,
  2. body {
  3. height: 100%;
  4. }
  5.  
  6. body {
  7. background-color: #f5f7f9;
  8. color: #6c6c6c;
  9. font: 300;
  10. font-size: 1em;
  11. line-height: 1.5em;
  12. font-family: 'Helvetica Neue';
  13. font-family-fallback: sans-serif;
  14. margin: 0;
  15. position: relative;
  16. }
  17.  
  18. h1 {
  19. font-size: 2.25em;
  20. font-weight: 100;
  21. line-height: 1.2em;
  22. margin: 0 0 1.5em;
  23. }
  24.  
  25. /* HELPERS */
  26.  
  27. .text-center {
  28. text-align: center;
  29. }
  30.  
  31. /* GRID */
  32.  
  33. .container {
  34. left: 50%;
  35. position: absolute;
  36. top: 50%;
  37. transform: translate(-50%, -50%);
  38. }
  39.  
  40. /* PROGRESS */
  41.  
  42. .progress {
  43. background-color: #e5e9eb;
  44. height: .25em;
  45. position: relative;
  46. width: 24em;
  47.  
  48. &-bar {
  49. animation-duration: 3s;
  50. animation-name: width;
  51. background-image: linear-gradient(to right,
  52. #4cd964, #5ac8fa, #007aff);
  53. background-size: 24em .25em;
  54. height: 100%;
  55. position: relative;
  56. }
  57.  
  58. &-shadow {
  59. background-image: linear-gradient(to bottom, #eaecee, transparent);
  60. height: 4em;
  61. position: absolute;
  62. top: 100%;
  63. transform: skew(45deg);
  64. transform-origin: 0 0;
  65. width: 100%;
  66. }
  67.  
  68. }
  69.  
  70. /* ANIMATIONS */
  71.  
  72. @keyframes width {
  73.  
  74. 0%, 100% {transition-timing-function: cubic-bezier(1, 0, .65, .85);
  75. }
  76.  
  77. 0% {
  78. width: 0;
  79. }
  80.  
  81. 100% {
  82. width: 100%;
  83. }
  84. }
  85.  
  86.  
  87.  
  88. HTML
  89.  
  90. <div class="container">
  91. <div class="progress">
  92. <div class="progress-bar">
  93. </div>
  94. </div>
  95. </div>

Report this snippet  

You need to login to post a comment.