web-dev-qa-db-ja.com

プログレスバーの作り方

Html/css/javascriptにプログレスバーを作成する方法を教えてください。私は本当にFlashを使いたくありません。ここにあるものの線に沿って何か： http://dustincurtis.com/about.html

本当に欲しいのは、PHPで指定した値に変更する「プログレスバー」だけです。あなたのプロセスはどうなりますか？これに関する良いチュートリアルはありますか？

javascripthtmlcssprogress-bar
35
john mossel

それを行うには、cssを使用してdivの幅を制御します。これらの線にほぼ沿ったもの：

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

その幅の値は、必要に応じてphpから送信できます。

43
Sam Dufel

HTML5を使用している場合は、<progress>新しく導入されたタグ。

<progress value="22" max="100"></progress>

または、独自のプログレスバーを作成します。

煎茶で書かれた例

if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');
27
najeeb

http://jqueryui.com/demos/progressbar/

確認してください、それはあなたが必要なものかもしれません。

12
SapphireSun

progressbar.js;アニメーションプログレスバーコントロールと小さなチャート（スパークライン）を使用できます

デモとダウンロード リンク

enter image description here

HTMLの使用;

<div id="my-progressbar"></div>

Javascriptの使用;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}
10
bugra ozden

基本的にこれは次のとおりです。3つのファイルがあります。長時間実行するPHPスクリプト、Javascriptで制御されるプログレスバー（ @ SapphireSunはオプションを指定 ）、およびプログレススクリプト。難しい部分はプログレススクリプトです;長いスクリプトは、プログレススクリプトと直接通信することなく進捗を報告できる必要があります。これは、プログレスメーター、データベース、または完了していないもののチェックにマップされたセッションIDの形式になります。

プロセスは簡単です：

  1. スクリプトを実行し、進行状況バーをゼロにします
  2. AJAXを使用して、進行状況スクリプトを照会する
  3. 進行状況スクリプトは、何らかの方法で進行状況を確認する必要があります
  4. 値を反映するように進行状況バーを変更します
  5. 終了したらクリーンアップする
6
TheLQ

シンプルなプログレスバーを試しました。クリック可能ではなく、実際のパーセンテージを表示するだけです。ここには良い説明とコードがあります： http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

5
Fricike

これが私のアプローチです、私はそれをスリムにしようとしました：

HTML：

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

CSS：

.load{    
    width: 50%;
    height: 12px;
    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.noload{
    width: 100px;    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);     
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: -1px;
}

フィドル： here

enter image description here

4
fubo

純粋なJavascriptを使用した不定進行状況バー

<div id="container" style="width:100%; height:5px; border:1px solid black;">
  <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div>
</div>

<script>
  var width = 0;
  window.onload = function(e){ 
    setInterval(function () {
        width = width >= 100 ? 0 : width+5;  
        document.getElementById('progress-bar').style.width = width + '%'; }, 200);            
  }
</script>

例 http://fiddle.jshell.net/1kmum4du/

3
pymen

これを使用しました プログレスバー 。これについての詳細は、こちらをご覧ください link すなわちカスタマイズ、コーディングなど.

<script type="text/javascript">

var myProgressBar = null
var timerId = null

function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
    borderRadius: 10,
    width: 300,
    height: 20,
    maxValue: 100,
    labelText: "Loaded in {value,0} %",
    orientation: ProgressBar.Orientation.Horizontal,
    direction: ProgressBar.Direction.LeftToRight,
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
    animationSpeed: 1.5,
    imageUrl: 'images/v_fg12.png',
    backgroundUrl: 'images/h_bg2.png',
    markerUrl: 'images/marker2.png'
});

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue)
        myProgressBar.setValue(0);
    else
        myProgressBar.setValue(myProgressBar.value+1);

},
100);
}

loadProgressBar();
</script>

これが誰かに役立つことを願っています。

2
surhidamatya

ブラウザはまだサポートしていないため、次のは現在動作しませんを知っていますが、いつかこれが役立つかもしれません：

この投稿の時点では、content以外のプロパティのattr()は単なる 推奨候補 です1。実装されるとすぐに、1つの要素（HTML 5 <progress/>、ただし、より優れたスタイリングオプションとテキストを含む）

<div class="bar" data-value="60"></div>

および純粋なCSS

.bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

これは現在動作していないデモ です。

1 これがどのブラウザにも実装されていない理由は想像できません。最初に、contentの機能が既にある場合、それを拡張するのはそれほど難しくないはずだと思います（もちろん、正直であることはよくわかりません）。 2番目：上記は、この機能がどれほど強力かを示す良い例です。すぐにサポートを開始するか、最終仕様に含まれないことを願っています。

1
Linus Caldwell

グラデーションを設定できるHTML要素のプログレスバーを作成できます。 （かなりクール！）以下のサンプルでは、​​HTML要素の背景がJavaScriptで線形グラデーションに更新されています。

myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";

PSハードラインを作成するために、両方の場所をpercentage同じに設定しました。デザインを試して、境界線を追加して、クラシックな進行状況バーの外観にすることもできます:)

enter image description here

https://jsfiddle.net/uoL8j147/1/

1
Bruno
var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");
1
san

PHP内でプログレスバーを表示および非表示にする必要がある場合、およびJavaスクリプト、この手順に従います。完全なソリューションであり、ライブラリなどは不要です。

           //Design Progress Bar

  <style>
#spinner
{     
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;

height: 200px;


width: 300px;
margin-left: -300px;

    /*Change your loading image here*/
   background: url(images/loading12.gif) 50% 50% no-repeat ;

}
  </style>

               //Progress Bar inside your Page

<div id="spinner" style=" display:none; ">
</div>                                

    // Button to show and Hide Progress Bar
<input class="submit" onClick="Show()" type="button" value="Show" /> 
<input class="submit" onClick="Hide()" type="button" value="Hide" /> 

            //Java Script Function to Handle Button Event     
<script language="javascript" type="text/javascript">
 function Show()
 {       
  document.getElementById("spinner").style.display = 'inline';
 }
function Hide()
 {       
  document.getElementById("spinner").style.display = 'none';
 }

</script>

画像リンク： ここから画像をダウンロード

0
Pir Fahim Shah

setIntervalを使用してプログレスバーを作成し、その幅をアニメーション化する

進行状況バーのアニメーション中に最高のパフォーマンスを得るには、 コンポジターのみのプロパティとレイヤーカウントの管理 を考慮する必要があります。

以下に例を示します。

function update(e){
  var left = e.currentTarget.offsetLeft;
  var width = e.currentTarget.offsetWidth
  var position = Math.floor((e.pageX - left) / width * 100) + 1;
  var bar = e.currentTarget.querySelector(".progress-bar__bar");
  bar.style.transform = 'translateX(' + position + '%)';
}
body {
  padding: 2em;
}

.progress-bar {
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
}

.progress-bar {
  background-color: #669900;
  border-radius: 4px;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  height: 20px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 100%;
}

.progress-bar__bar {
  background-color: #ececec;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 500ms ease-out;
}
Click on progress bar to update value

<div class="progress-bar" onclick="update(event)">
  <div class="progress-bar__bar"></div>
</div>
0
Priyesh Diukar

setIntervalを使用して、進行状況バーを作成できます。

function animate() {
  var elem = document.getElementById("bar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
#progress-bar-wrapper {
  width: 100%;
  background-color: #ddd;
}

#bar {
  width: 1%;
  height: 30px;
  background-color: orange;
}
<div id="progress-bar-wrapper">
  <div id="bar"></div>
</div>

<br>
<button onclick="animate()">Click Me</button>
0
Mithila Gaonkar

CSS3アニメーションを使用してプログレスバーを再作成すると、見栄えがよくなります。

JSFiddle Demo

[〜＃〜] html [〜＃〜]

<div class="outer_div">
    <div class="inner_div">
        <div id="percent_count">

    </div>
</div>

CSS/CSS3

.outer_div {
    width: 250px;
    height: 25px;
    background-color: #CCC;
}

.inner_div {
    width: 5px;
    height: 21px;
    position: relative; top: 2px; left: 5px;
    background-color: #81DB92;
    box-shadow: inset 0px 0px 20px #6CC47D;
    -webkit-animation-name: progressBar;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

#percent_count {
    font: normal 1em calibri;
    position: relative;
    left: 10px;
}

@-webkit-keyframes progressBar {
    from {
        width: 5px;
    }
    to {
        width: 200px;
    }
}
0
user2865400

ProgressBar.js を使用できます。依存関係はなく、簡単なAPIであり、主要なブラウザーをサポートしています。

var line = new ProgressBar.Line('#container');
line.animate(1);

使用例の詳細を参照してください デモページで

0
Kimmo