April 28, 2015

Upload button with progress

Upload button with progress

A simple material design upload button showing a progress indicator. I have used fontawesome for the icons.

HTML

<label class="button">
  <input type="checkbox"/>
  <div class="circle">
    <div class="clipper _1"></div>
    <div class="clipper _2"></div>
  </div>
  <div class="icon">
    <div class="upload">
      <i class="fa fa-cloud-upload"></i>
    </div>
    <div class="done">
      <i class="fa fa-check"></i>
    </div>
  </div>
</label>

CSS

.button {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  margin: -50px;
  overflow: hidden;
  cursor: pointer;
  background: #1976D2;
}

.button:active {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.icon,
.upload,
.done,
.circle,
.clipper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.fa {
  font-size: 40px;
  color: white;
}

.upload,
.done {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: opacity 0s linear;
  transition: opacity 0s linear;
}

.upload svg,
.done svg {
  fill: white;
}

.done {
  opacity: 0;
}

input:checked ~ .icon .done {
  opacity: 1;
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
}

.upload {
  opacity: 1;
}

input:checked ~ .icon .upload {
  opacity: 0;
  -webkit-transition-delay: 2s;
  transition-delay: 2s;
}

.clipper {
  width: 50%;
  overflow: hidden;
}

.clipper:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 0px solid white;
  -webkit-transition: -webkit-transform 0s linear;
  transition: transform 0s linear;
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
  background: #388E3C;
}

.clipper._1:before {
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.clipper._2:before {
  border-top-right-radius: 100% 50%;
  border-bottom-right-radius: 100% 50%;
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

input:checked ~ .circle .clipper:before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}

input:checked ~ .circle .clipper._1:before {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.clipper._2,
.clipper._2:before {
  left: auto;
  right: 0;
}

Attachments:

I have used external attachments.

//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views