English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

Javascript+CSS3進捗バー効果の実現

進捗バーは多くのウェブプロジェクトで使用されます。この記事では、進捗バー効果について説明しています。具体的なコードは以下の通りです：

一：CSS2 属性clipでウェブプロジェクトの進捗バーを実現する

実装する前に、この属性について紹介します。なぜなら、この属性はCSS2.1でほとんど使用されませんので、理解する必要があります；

ブラウザのサポートレベル：すべての主要ブラウザがclip属性をサポートしています。

Clip属性はw3cウェブサイトでは以下のように説明されています：要素の可視エリアを制御するために要素に対してカットアウトを行います。デフォルトでは、要素は何もカットアウトされません。

Clip裁剪の構文は以下の通りです：

　.xx {clip:rect(<top>, <right>, <bottom>, <left>)}

Rect属性は、top、right、bottom、leftの4つの値が必要です。これらの値はカンマで区切られます。時計回りに回転するルールに従って、CSSのmargin、paddingの書き順と同じです。

CSS2.1rect()の<top>,<bottom>指定のオフセットは、要素のボックスの上部端から計算されます。<left>、<right>指定のオフセットは、要素のボックスの左側端から計算されます。以下の通りです：

再び簡単なdemoを見てみましょう。

以下のcss

p#one { clip: rect(5px, 40px, 45px, 5px); }

p#two { clip: rect(5px, 55px, 45px, 5px); }

この例は以下の50X55pxの長方形ボックス内が行の切り取りで、点線の長方形になります：

如下图：

我们现在可以先来看一个进度条的demo；

以下はHTMLコードです：

<h2>使用clip実現裁剪デモ</h2>
<div id="progress-box" class="progress-box">
  <div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
</div>

以下はCSSコードです：

.progress-box{position:absolute;left:0;width:300px;height:60px;border:1px solid #000;margin-left:20px;}
.progress-bar{position:absolute;left:0;top:0;width:300px;height:60px;clip:rect(0px,0px,60px,0px);background:red;}
.progress-text{position:absolute;left:0;top:0;width:300px;height:60px;color:Black;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}

ここでは、上記のHTMLについて説明します。3div、一つは要素のコンテナ(progress-box)は基本的に、ユーザーに枠線が強調され、100%はどの程度の容量があるべきです。

二番目のprogress-barは進捗を示す要素の背景色を赤色に設定しています。

三番目は進捗表示の数値テキストを示します。

効果を示すために、シンプルなJSのsetIntervalコードを使用して進捗バーの効果を示す必要があります；以下のsetIntervalのコード；

var bar = document.getElementById("progress-bar"),
   text = document.getElementById("progress-text");
var cent = 0;
   max = 300;
var timer = setInterval(progressFn, 30);
function progressFn() {
  if(cent > max) {
    cent = 0;
    timer = setInterval(arguments.callee(), 30);
  }else {
    bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
    text.innerHTML = Math.ceil((cent / max) * 100) + "%";
    cent++;
  }
}

demoの効果は以下の通りです；clipを使用してカットアウトdemo

二：進捗イベント(progress)を使用してサーバー側とインタラクションを行い、ウェブページの進捗バーを実現します；

進捗イベント(progress) ：クライアントとサーバーの通信に関連するイベントを定義し、以下があります6個の進捗イベント。

  1. loadstart：応答データの最初のバイトを受信したときにトリガーされます。
  2. progress：応答データを受信中に継続的にトリガーされます。
  3. error：リクエストがエラーが発生したときにトリガーされます。
  4. abort：abort()メソッドの呼び出しによりリンクが終了したときにトリガーされます。
  5. load：完全な応答データを受信したときにトリガーされます。
  6. loadend：通信が完了したり、error、abortまたはloadイベントがトリガーされた後にトリガーされます。

各リクエストでは、Loadstartイベントが最初にトリガーされ、その後1つまたは複数のprogressイベントがトリガーされ、次にerror、abortまたはloadイベントの1つがトリガーされ、最後にloadendイベントがトリガーされます。

がサポートしています。5のイベントを持つブラウザにはFirefox 3.5+、Safari 4+、Chrome、iOS版Safari、Android版WebKit。

このイベントは、ブラウザが新しいデータを受け取る間に周期的に発生します。onprogressイベントハンドラは、eventオブジェクトを受け取り、そのtarget属性はXHRオブジェクトですが、lengthComputable、position、totalSizeという3つの追加の属性を含んでいます。そのうち、lengthComputableは進捗情報が利用可能かどうかを示すブール値で、positionは受け取ったバイト数を示し、totalSizeはContent-Lengthに対応するヘッダーで決定される期待されるバイト数があります。これらの情報を基に、ユーザーに対してプロセスインディケーターを作成することができます。以下のスクリーンショットには、上記の3つのパラメータがあります；

以下はHTMLコードです：

<h2>使用clip実現裁剪デモ</h2>
<div id="progress-box" class="progress-box">
  <div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
</div>
<div id="status"></div>

与服务器端交互的代码如下：

var divbar = document.getElementById("progress-bar"),
  divText = document.getElementById("progress-text");
var cent = 0;
  max = 300;
function createXHR(){
   var xhr;
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
     xhr=new XMLHttpRequest();
   }else{ // code for IE6, IE5
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
 }
 var xhr = createXHR();
 xhr.onload = function() {
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
     alert(xhr.responseText);
  }else {
     alert("Request was unsuccessful: " + xhr.status);
  }
 }
 xhr.onprogress = function(event) {
  var divStatus = document.getElementById("status");
  if (event.lengthComputable) {
      divStatus.innerHTML = "Recived" + event.position + " は " + event.totalSize + " バイト";
      console.log(event.target);
      var percentComplete = Math.round(event.loaded / event.total);
      // event.loadedが現在読み込んだバイトストリームの量を示し、event.totalが読み込まれるべき合計バイトストリームの量を示します。このようにして、以下のパーセンテージを得ます：
      console.log(event.loaded, event.total, 300 * percentComplete);
      progressFn(300 * percentComplete, max);
   }
 }
 xhr.open("get", "progress.php", true);
 xhr.send(null); 
 function progressFn(cent,max) {
   if (cent < max) {
     divbar.style.clip = "rect(0px," + cent + "px,60px,0px)";
     divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
   } 
 }

PHPコード 任意にシミュレートするため、任意に書いたものですが、実際の使用ではこんなものではありません！ただ内容を出力するだけであります；

<?php
  header("Content-Type: text/plain");
  header("Content-Length: 27");
  echo "Some data";
  flush();
  echo "Some data";
  flush();
  echo "Some data";
  flush();
?>

三： CSS3 アニメーションおよび線形グラデーションを使用したプログレスバーのデモ；

以下はHTMLコードです：

<div id="loading-status">
  <div id="process"></div>
</div>

以下はCSSコードです：

#loading-status {width:300px;border:1px solid #669CB8;-webkit-box-shadow: 0px 2px 2px #D0D4D6; -moz-box-shadow:0px 2px 2px #D0D4D6;border-radius: 10px;height:20px;padding: 1px;}
#process {width: 80%;height: 100%;border-radius: 10px;background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));-webkit-animation: load 3s ease-out infinite;}
@-webkit-keyframes load {
  0% {
    width: 0%;      
  }
  100% {
    width: 80%;    
  }
}

効果は以下の通りです：

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際は、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは侵害が疑われるコンテンツをすぐに削除します。)

基本教程
おすすめ