Google Reader のアレ（偽）

できた（・∀・）とりあえずクロムちゃんオンリー

by ethertank

HTML

<div id="l"></div>

<p>&darr;この画像をくりくりホーミーしてまする</p>

CSS

html { background: #000; color:#fff; }

@-webkit-keyframes loading {
       0% { background-position: 0 -80px }
      20% { background-position: 0 0 }
      40% { background-position: -80px 0 }
      60% { background-position: -80px -80px; }
      80% { background-position: 0 -80px; }
     100% { background-position: 0 -80px; } /* wait */
}

#l {
    width:20px;height:20px;
    border-radius:10px;
    background-position: 0 80px;
    /* background-image: generated background */
    -webkit-animation: loading 6s linear infinite;
}

/* disignTimeStyle*/
#l { margin: 20px; }

JavaScript

/*
 * 画像の生成と、生成した画像のインジゲーター用要素の背景への適用
 * ※本番はこの過程を省略し、画像で。
 */
var cvs = document.createElement("canvas"),
    c = cvs.getContext('2d');
cvs.width = 100;
cvs.height = 100;

//　document.body.appendChild(cvs); //※作成時確認用

c.lineWidth = 20;

c.beginPath();
c.strokeStyle = "red";
c.moveTo(10, 80);
c.lineTo(10, 0);
c.stroke();

c.beginPath();
c.strokeStyle = "yellow";
c.moveTo(20, 10);
c.lineTo(100, 10);
c.stroke();

c.beginPath();
c.strokeStyle = "green";
c.moveTo(90, 20);
c.lineTo(90, 100);
c.stroke();

c.beginPath();
c.strokeStyle = "blue";
c.moveTo(80, 90);
c.lineTo(0, 90);
c.stroke();

var bg = cvs.toDataURL();
var l = document.getElementById("l");
l.style.backgroundImage = "url(" + bg + ")";


var img = new Image();
img.src = bg;
document.body.appendChild(img);