rapha&# 235;l:尝试将半动画文本添加到旋转器图形中

我想添加一串文本到我的旋转器图形。例如，我希望能够将文本放在下面，旁边的，或者在内。问题是，我不知道该怎么做。另外，我只想让文本本身半动画化(如果我让它动画化太多，用户可能无法阅读它)。

• 用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>