Custom Progress Bar

custom-progress-bar.markdown

Custom Progress Bar

A Pen by uploadcare on CodePen.

License.

index.html

<div>
  <p>
    Single-file uploader:
    <input
      type="hidden"
      role="uploadcare-uploader"
      data-clearable
      class="custom-progress"
    />
    <span class="meter"><span></span></span>
  </p>
  <p>
    Multi-file uploader:
    <input
      type="hidden"
      role="uploadcare-uploader"
      data-clearable
      class="custom-progress"
      data-multiple="true"
    />
    <span class="meter"><span></span></span>
  </p>
</div>

script.js

function installProgressBar(widget, progress) {
  var currentObject
  var progress = $(progress)

  widget.onChange(function(widgetObject) {
    currentObject = widgetObject
    if (widgetObject) {
      progress.width(0).show()
      widgetObject
        .promise()
        .progress(function(info) {
          if (currentObject === widgetObject) {
            progress.width((info.uploadProgress * 100).toFixed(2) + '%')
          }
        })
        .always(function() {
          if (currentObject === widgetObject) {
            progress.hide()
          }
        })
    }
    else {
      progress.hide()
    }
  })
}
$(function() {
  $('.custom-progress').each(function() {
    var input = $(this)
    var widget = uploadcare.Widget(input)

    installProgressBar(
      widget,
      input
        .nextAll('.meter')
        .eq(0)
        .children()
    )
  })
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js"></script>

style.css

body {
	margin: 16px;
}

p {
	margin: 8px 0;
}

code {
  font-family: monospace;
}

/* Hide builtin progress bar */
.custom-progress + .uploadcare--widget .uploadcare--widget__progress {
  display: none !important;
}
.meter {
  height: 25px;
  position: relative;
  display: block;
  margin: 10px 0;
}
.meter > span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    to top,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  transition: width 0.25s;
}
.meter > span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%
  );
  z-index: 1;
  background-size: 50px 50px;
  -webkit-animation: meter-move 2s linear infinite;
  animation: meter-move 2s linear infinite;
  border-radius: 8px;
}
@-webkit-keyframes meter-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@keyframes meter-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}