HOME
サイトマップ
営業日カレンダー
お問い合わせ

JavaScriptとCSS3で、進捗と終了をアニメーション表示するダウンロードボタンです。サンプルは青地の円に白の下矢印のダウンロードボタンです。これをクリックすると、円の周りの罫線で進捗を表し、ダウンロードが済むと円は緑色に変わり、白色のチェックマークが付きます。なお、デモのため再度ボタンをクリックするともとに戻ります。また、JavaScriptは、ボタンクリックした際のclassをtoggleするためだけに使われています。

 

 

サンプルのhtmlソース

<div class="download-btn">
  <div class="btn__circle"> 
    <svg width="140" height="140"> 
      <circle r="60" cx="70" cy="70"
       class='download' stroke-width="10" />
      </circle>
      <circle class="bar" stroke-width="10" r="60" cx="70" cy="70" fill="transparent" 
      stroke ='red' stroke-dasharray="565.48" stroke-dashoffset="565.48">
      </circle>
    </svg>
  </div>
  <div class="btn__arrow btn--icon"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
  <div class="btn__stop btn--icon"><i class="fa fa-pause" aria-hidden="true"></i></div>
  <div class="btn__done btn--icon"><i class="fa fa-check" aria-hidden="true"></i></div>
</div>

サンプルのCSSソース

@import url("https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,700,900");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.wrapper {
	width:150px;
	height:150px;
	margin:10px auto;
	font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  overflow-x: hidden;
  text-align: center;
	line-height:1.2;
}
h1 {
  text-transform: uppercase;
  text-align: center;
  color: #666;
}

h5 {
  text-transform: uppercase;
  text-align: center;
  color: #666;
  font-weight: 100;
}

.download-btn {
  cursor: pointer;
  display: inline-block;
}

.download {
  fill: #37d;
  stroke: #37d;
  stroke-dashoffset: 20%;
}

.download--animate {
  -webkit-animation: circle-animate-1 2s forwards, circle-animate-2 .5s 4s forwards;
          animation: circle-animate-1 2s forwards, circle-animate-2 .5s 4s forwards;
}

.download-btn {
  position: relative;
  height: 140px;
  width: 140px;
}

.bar {
  stroke: #37d;
}

.bar--animate {
  -webkit-animation-name: bar-animate;
          animation-name: bar-animate;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.btn--icon {
  -webkit-transition: .3s;
  transition: .3s;
  position: absolute;
  font-size: 54px;
  left: 47px;
  top: 40px;
}

.btn__arrow {
  color: #fff;
  opacity: 1;
}

.btn__arrow--animate {
  -webkit-animation-name: arrow-animate;
          animation-name: arrow-animate;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.btn__stop {
  color: #028EFF;
  opacity: 0;
}

.btn__stop--animate {
  -webkit-animation-name: stop-animate;
          animation-name: stop-animate;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.btn__done {
  color: #fff;
  opacity: 0;
}

.btn__done--animate {
  -webkit-animation-name: done-animate;
          animation-name: done-animate;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes arrow-animate {
  0% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@keyframes arrow-animate {
  0% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes stop-animate {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@keyframes stop-animate {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes done-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes done-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes circle-animate-1 {
  0% {
    fill: #028EFF;
    stroke: #028EFF;
  }
  100% {
    fill: #fff;
    stroke: #D1EAFE;
  }
}
@keyframes circle-animate-1 {
  0% {
    fill: #028EFF;
    stroke: #028EFF;
  }
  100% {
    fill: #fff;
    stroke: #D1EAFE;
  }
}
@-webkit-keyframes circle-animate-2 {
  0% {
    fill: #fff;
    stroke: #D1EAFE;
  }
  100% {
    fill: #3bc27a;
    stroke: #3bc27a;
  }
}
@keyframes circle-animate-2 {
  0% {
    fill: #fff;
    stroke: #D1EAFE;
  }
  100% {
    fill: #3bc27a;
    stroke: #3bc27a;
  }
}
@-webkit-keyframes bar-animate {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    stroke-dashoffset: 565px;
  }
  5% {
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 450px;
  }
  50% {
    stroke-dashoffset: 350px;
  }
  75% {
    stroke-dashoffset: 250px;
  }
  99% {
    stroke-dashoffset: 20px;
    stroke: #028EFF;
  }
  100% {
    stroke-dashoffset: 5px;
    stroke: #3bc27a;
  }
}
@keyframes bar-animate {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    stroke-dashoffset: 565px;
  }
  5% {
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 450px;
  }
  50% {
    stroke-dashoffset: 350px;
  }
  75% {
    stroke-dashoffset: 250px;
  }
  99% {
    stroke-dashoffset: 20px;
    stroke: #028EFF;
  }
  100% {
    stroke-dashoffset: 5px;
    stroke: #3bc27a;
  }
}

サンプルのJavaScriptソース

$(".download-btn").click(function() {
  $(".download").toggleClass("download--animate");
  $(".bar").toggleClass("bar--animate");
  $(".btn__arrow").toggleClass("btn__arrow--animate");
  $(".btn__stop").toggleClass("btn__stop--animate");
  $(".btn__done").toggleClass("btn__done--animate");
});

 

 

引用と参考；https://codepen.io/thesheepman/pen/WZoXey
戻るボタン