progress.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233
  1. @keyframes progress-bar-stripes {
  2. from {
  3. background-position: 40px 0;
  4. }
  5. to {
  6. background-position: 0 0;
  7. }
  8. }
  9. .progress-bar-striped {
  10. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
  11. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
  12. background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
  13. -webkit-background-size: 40px 40px;
  14. background-size: 40px 40px;
  15. }
  16. .progress-bar-striped {
  17. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
  18. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
  19. background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
  20. }
  21. .progress-bar.active {
  22. -webkit-animation: progress-bar-stripes 2s linear infinite;
  23. -o-animation: progress-bar-stripes 2s linear infinite;
  24. animation: progress-bar-stripes 2s linear infinite;
  25. }
  26. .bar-container {
  27. background: $blue_l;
  28. .progress-bar {
  29. height: 100%;
  30. }
  31. }