Raphaël : Spinner 그래픽에 반 애니메이션 텍스트 추가 시도

Spinner 그래픽에 텍스트 문자열을 추가하려고합니다. 예를 들어, 아래 , 옆 또는 스피너 휠 내부에 텍스트를 배치 할 수 있기를 원합니다 . 문제는 어떻게해야할지 모르겠다는 것입니다. 또한 텍스트 자체 만 반 애니메이션화하고 싶습니다 (너무 많이 애니메이션하면 사용자가 읽을 수 없을 수도 있음).

• Raphael로 만든 스피너 :
  • http://jsfiddle.net/mnbishop017/vM9uk/
  • http://jsfiddle.net/mnbishop017/5BHhE/
• 대상 결과의 HTML 예제 모형 : http://jsfiddle.net/mnbishop017/4Enrk/

스피너 코드 (JavaScript> Raphaël) :

window.onload = function () {
    function spinner(holderid, R1, R2, count, stroke_width, color) {
        var sectorsCount = count || 12,
            color = color || "#fff",
            width = stroke_width || 15,
            r1 = Math.min(R1, R2) || 35,
            r2 = Math.max(R1, R2) || 60,
            cx = r2 + width,
            cy = r2 + width,
            r = Raphael(holderid, r2 * 2 + width * 2, r2 * 2 + width * 2),

            sectors = [],
            opacity = [],
            beta = 2 * Math.PI / sectorsCount,

            pathParams = {
                stroke: color,
                "stroke-width": width,
                "stroke-linecap": "round"
            };
        Raphael.getColor.reset();
        for (var i = 0; i < sectorsCount; i++) {
            var alpha = beta * i - Math.PI / 2,
                cos = Math.cos(alpha),
                sin = Math.sin(alpha);
            opacity[i] = 1 / sectorsCount * i;
            sectors[i] = r.path([
                ["M", cx + r1 * cos, cy + r1 * sin],
                ["L", cx + r2 * cos, cy + r2 * sin]
            ]).attr(pathParams);
            if (color == "rainbow") {
                sectors[i].attr("stroke", Raphael.getColor());
            }
        }
        var tick;
        (function ticker() {
            opacity.unshift(opacity.pop());
            for (var i = 0; i < sectorsCount; i++) {
                sectors[i].attr("opacity", opacity[i]);
            }
            r.safari();
            tick = setTimeout(ticker, 1000 / sectorsCount);
        })();
        return function () {
            clearTimeout(tick);
            r.remove();
        };
    }
    spinner("holder", 0, 120, 17, 2, "#000");
    // spinner("holder", -120, 120, 17, 2, "#005075"); Second spinner inserted above first spinner
};

원하는 결과의 모형 (HTML)

<div>
    <!-- .placeholder is where the main Loading graphic (or animation) appears -->
    <div class="placeholder"></div>

    <!-- .text is where the Loading text appears: -->
    <!-- next to the graphic, vertically aligned to the middle -->
    <div class="text">loading</div>
</div>