色を変える簡単な進捗ボタンを作る方法

Question

最初の例のようなものを作成したいが、代わりに色とテキストを「ダウンロード済み」に変更する必要がある。 https://tympanus.net/Development/ProgressButtonStyles/

私はファイルを操作しようとしましたが、初心者のためにjavascriptを学習するのは多すぎました。プログレスバーを作成する簡単な方法はありますか？

Answer 1

チェックアウトの基本的な進行状況バー - http://www.w3schools.com/w3css/w3css_progressbar.asp。私はシンプルなプログレスバーから作成し、javascriptを使って幅を増やす方法を示す簡単な例も作成しました。プログレスバーにはコンテナと、進行状況に応じて幅が調整されたオーバーレイdivがあります。コンテナと進行状況バーの両方の背景色を変更することができます。

var progressBtn = document.getElementById('progress_btn'); 
 
var progressElement = document.getElementById('progress_bar'); 
 
var submitText = document.getElementById('submit_text'); 
 

 
progressBtn.addEventListener('click', function() { 
 
    // Update the text. 
 
    submitText.textContent = 'Downloading...'; 
 
    
 
    // Initialize the progress variable. 
 
    var progress = 0; 
 
    
 
    // Move the progress bar by 10% every second. 
 
    var progressInterval = setInterval(function() { 
 
    \t progress += 10; 
 
    progressElement.style.width = progress + '%'; 
 
    
 
    // Clear the interval once we've reached 100%. 
 
    if (progress == 100) { 
 
\t \t \t clearInterval(progressInterval); 
 
    } 
 
    }, 1000); 
 
});

.btn { 
 
    text-align: center; 
 
    line-height: 20px; 
 
    height: 20px; 
 
    background: #5b92a1; 
 
    border-radius: 2px; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    font-family: 'Open Sans'; 
 
    color: white; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.progress { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #63b1b3; 
 
    height: 100%; 
 
    border-radius: 2px; 
 
    transition: width 1s ease; 
 
    width: 0; 
 
}

<div id="progress_btn" class="btn"> 
 
    <div id="progress_bar" class="progress"></div> 
 
    <span id="submit_text">Submit</span> 
 
</div>

Answer 2

あなたは多くの方法でそれを行うことができますが、これは私が現在、覚えることができる最も簡単なものです。それは、widthプロパティのCSSトランジション、および最小限のjavascriptに依存しています。

btn=document.getElementById('btn'); 
 
prog=document.getElementById('progress'); 
 
text=document.getElementById('text'); 
 
btn.onclick=function() { 
 
prog.classList.add('anima'); 
 
prog.addEventListener("transitionend", function(event) { 
 
    text.textContent="downloaded"; 
 
}, false); 
 

 
}

button { 
 
    color:white; 
 
    border:1px solid gray; 
 
    border-radius:5px; 
 
    background:green; 
 
    cursor:pointer; 
 
    width:200px; 
 
    height:70px; 
 
    padding:0; 
 
    position:relative; 
 
    outline:none; 
 
} 
 
#progress { 
 
    width:0px; 
 
    height:70px; 
 
background-color:darkgreen; /*set desired color*/ 
 
position:absolute; 
 
left:0; 
 
top:0; 
 
z-index:2; 
 
border-radius:5px; 
 

 

 
} 
 
#progress.anima { 
 
    width:200px; 
 
    transition: width 2s ease; 
 
} 
 
#bar { 
 
    position:relative; 
 
} 
 
span { 
 
    z-index:9; 
 
    position:relative; 
 
    text-transform:uppercase; 
 
}

<div id="bar"> 
 
<button id="btn"> 
 
<span id="text">SUBMIT</span> 
 
</button> 
 
<div id="progress"> 
 
</div> 
 
</div>

したがって、設定容器、初期幅と、プログレスバーのdivを追加し、ボタンを追加：0を設定位置：絶対、ボタンをカバーするために、上記の場所のテキスト（higer zのインデックス） 、クリック時にクラスのアニマ」を追加します。

アニメーションが終了したときの幅のスムーズな移行は、「transitionend」イベントをリッスンし、スパンのテキストが変更される、プログレスバーにイベントリスナーを追加行います

#progress.anima { 
    width:200px; 
    transition: width 2s ease; 
} 

。

Answer 3

var progress = document.getElementById('progress'); 
 

 
document.getElementById('accept').addEventListener('click', function() { 
 
    if(progress.value < 100) progress.value += 5; 
 
}, false); 
 

 
document.getElementById('reject').addEventListener('click', function() { 
 
    progress.value -= 5; 
 
}, false);

.progress { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    width: 450px; 
 
    height: 35px; 
 
    max-width: 100%; 
 
} 
 
.progress::-webkit-progress-bar { 
 
    background: #eee; 
 
    border: 1px solid #ebebeb; 
 
} 
 
.progress::-webkit-progress-value { 
 
    background: -webkit-linear-gradient(right, #f74c4a, #ea0d0a); 
 
    background: linear-gradient(to left, #f74c4a, #ea0d0a); 
 
} 
 
.progress::-moz-progress-bar { 
 
    background: linear-gradient(to left, #f74c4a, #ea0d0a); 
 
} 
 
.progress[value^="3"]:not([value="3"])::-webkit-progress-value, .progress[value^="4"]:not([value="4"])::-webkit-progress-value, .progress[value^="5"]:not([value="5"])::-webkit-progress-value { 
 
    background: -webkit-linear-gradient(right, #ffd44b, #fec100); 
 
    background: linear-gradient(to left, #ffd44b, #fec100); 
 
} 
 
.progress[value^="3"]:not([value="3"])::-moz-progress-bar, .progress[value^="4"]:not([value="4"])::-moz-progress-bar, .progress[value^="5"]:not([value="5"])::-moz-progress-bar { 
 
    background: linear-gradient(to left, #ffd44b, #fec100); 
 
} 
 
.progress[value^="6"]:not([value="6"])::-webkit-progress-value, .progress[value^="7"]:not([value="7"])::-webkit-progress-value, .progress[value^="8"]:not([value="8"])::-webkit-progress-value, .progress[value^="9"]:not([value="9"])::-webkit-progress-value, .progress[value="100"]::-webkit-progress-value { 
 
    background: -webkit-linear-gradient(right, #4fd364, #2bab3f); 
 
    background: linear-gradient(to left, #4fd364, #2bab3f); 
 
} 
 
.progress[value^="6"]:not([value="6"])::-moz-progress-bar, .progress[value^="7"]:not([value="7"])::-moz-progress-bar, .progress[value^="8"]:not([value="8"])::-moz-progress-bar, .progress[value^="9"]:not([value="9"])::-moz-progress-bar, .progress[value="100"]::-moz-progress-bar { 
 
    background: linear-gradient(to left, #4fd364, #2bab3f); 
 
} 
 
.progress:after { 
 
    content: attr(value) "%"; 
 
    margin-left: 20px; 
 
    font-weight: bold; 
 
    width: 2em; 
 
} 
 

 
.buttons { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    margin-top: 50px; 
 
} 
 

 
.button { 
 
    width: 75px; 
 
    height: 75px; 
 
    -webkit-box-flex: 0; 
 
     -ms-flex: 0 0 75px; 
 
      flex: 0 0 75px; 
 
    border-radius: 50%; 
 
    color: #fff; 
 
    border: 5px solid #fff; 
 
} 
 
.button.button-accept { 
 
    background: #4fd364; 
 
} 
 
.button.button-reject { 
 
    background: #f74c4a; 
 
} 
 
.button:first-child { 
 
    margin-right: 25px; 
 
} 
 
.button:hover { 
 
    -webkit-transform: translateX(1px) translateY(1px); 
 
      transform: translateX(1px) translateY(1px); 
 
} 
 

 
.button-icon { 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 

 
.progress-container { 
 
    background: #fff; 
 
    font: normal normal 16px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 
 
    border: 2px solid #eee; 
 
    padding: 25px; 
 
    max-width: 100%; 
 
} 
 

 
.container { 
 
    max-width: 100%; 
 
    padding: 25px; 
 
} 
 

 
svg { 
 
    fill: currentColor; 
 
} 
 

 
body { 
 
    background: #fff url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/316871/geometry_mint.png); 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
    -webkit-font-smoothing: antialiased; 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    outline: 0; 
 
}

<div class="container"> 
 
    <div class="progress-container"> 
 
    <progress class="progress" id="progress" value="25" max="100"></progress> 
 
    </div> 
 
    <div class="buttons"> 
 
    <button class="button button-accept" id="accept"> 
 
     <svg class="button-icon" width="24" height="24" viewBox="0 0 24 24"> 
 
     <path d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"></path> 
 
     </svg> 
 
    </button> 
 
    <button class="button button-reject" id="reject"> 
 
     <svg class="button-icon" width="24" height="24" viewBox="0 0 24 24"> 
 
     <path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path> 
 
     </svg> 
 
    </button> 
 
    </div> 
 
</div>