Cross browser progress styling

FEATURED

In this example below you will see how to do a Cross browser progress styling with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Ayrton Fidelis, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ayrton Fidelis ©
  • HTML
  • CSS
  • JavaScript
    <progress min="0" max="100"></progress>
<progress min="0" max="100" value="15"></progress>
<progress min="0" max="100" value="30" class="progress-success"></progress>
<progress min="0" max="100" value="45" class="progress-info"></progress>
<progress min="0" max="100" value="60" class="progress-primary"></progress>
<progress min="0" max="100" value="75" class="progress-warning"></progress>
<progress min="0" max="100" value="90" class="progress-danger"></progress>

/*Downloaded from https://www.codeseek.co/ayrtonvwf/cross-browser-progress-styling-JZWENR */
    $progress-inner-shadow: 2px 2px 3px rgba(0,0,0,.5) inset;
$progress-border-radius: 3px;

@mixin progress-style() {
  position: relative;
  background-color: whitesmoke;
  height: 20px;
  border-radius: $progress-border-radius;
  box-shadow: $progress-inner-shadow;
  background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0,0,0,0.1) 33%, rgba(0,0,0,0.1) 66%, transparent 66%);
  background-size: 35px 20px;
  animation-duration: .5s;
  animation-name: animate-indeterminate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: none;
  width: 100%;
}
@mixin progress-color($color) {
  color: $color;
  &::-webkit-progress-value {
    background-color: $color;
  }
  &::-moz-progress-bar {
    background-color: $color;
  }
}
progress {
  @include progress-style();
  margin-bottom: 10px;
  &::-ms-fill {
    animation-name: none;
  }
  &::-webkit-progress-bar, &::after {
    // this creates an animated overlay on webkit with progress:after
    // styles applied to ::-webkit-progress-bar will be reset later
    @include progress-style();
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    background-color: transparent;
    box-shadow: none;
  }
  &::-webkit-progress-bar {
    @include progress-style();
    background-image: none;
  }
  &::-moz-progress-bar {
    @include progress-style();
  }
  &[value] {
    background-image: none;
    @include progress-color(gray);
    &::-ms-fill {
      box-shadow: $progress-inner-shadow;
      border: none;
      border-radius: $progress-border-radius;
    }
    &::-webkit-progress-bar, &::after {
      background-image: none;
    }
    &::-webkit-progress-value {
      box-shadow: $progress-inner-shadow;
      border-radius: $progress-border-radius;
    }
    &::-moz-progress-bar {
      background-image: none;
    }
    &.progress-success {
      @include progress-color(green);
    }
    &.progress-info {
      @include progress-color(lightblue);
    }
    &.progress-primary {
      @include progress-color(blue);
    }
    &.progress-warning {
      @include progress-color(orange);
    }
    &.progress-danger {
      @include progress-color(red);
    }
  }
}
@keyframes animate-indeterminate {
  from { background-position-x: 0px }
  to { background-position-x: 35px }
}


/*Downloaded from https://www.codeseek.co/ayrtonvwf/cross-browser-progress-styling-JZWENR */
    

Comments