Skip to content

Instantly share code, notes, and snippets.

@coffeesam

coffeesam/bootstrap-progress-animation.scss

Last active October 2, 2019 21:09
Show Gist options
  • Save coffeesam/13a04c7bdf7ba6a61f2a to your computer and use it in GitHub Desktop.
Save coffeesam/13a04c7bdf7ba6a61f2a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. coffeesam revised this gist May 5, 2015. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions bootstrap-progress-animation.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    @-webkit-keyframes u-progress-stripes {
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    }
    @-moz-keyframes u-progress-stripes {
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    }
    @keyframes u-progress-stripes {
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    }
    .u-striped {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  2. coffeesam created this gist May 5, 2015.
    29 changes: 29 additions & 0 deletions bootstrap-progress-animation.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    @-webkit-keyframes u-progress-stripes {
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    }
    @-moz-keyframes u-progress-stripes {
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    }
    @keyframes u-progress-stripes {
    from { background-position: 0 0 }
    to { background-position: 40px 0 }
    }
    .u-striped {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px;
    }
    .u-striped.u-striped-animated {
    -webkit-animation: u-progress-stripes 1s linear infinite;
    -moz-animation: u-progress-stripes 1s linear infinite;
    animation: u-progress-stripes 1s linear infinite;
    }