Visual Studio style loader

by Admiral Potato

HTML

<script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
<ul id="holder"></ul>

CSS

body{
    background-color: #333;
}
#holder{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    list-style: none;
}
#holder li{
    display: block;
    position: absolute;
    height: 16px;
    width: 16px;
    line-height: 16px;
    color: #fff;
    background-color: #90c;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    font-family: sans-serif;
    font-weight: 800;
}

JavaScript

var pi = Math.PI,
    tau = pi * 2,
    deg = tau / 360,
    elementWidth = 32,
    settings = {
        numDots: 5,
        speedMultiplier: 0.25,
        innerTangentMultiplier: 1,
        outerTangentMultiplier: 2000,
        tangentWithinATangent: true
    },
    w = 0,
    h = 0,
    holder = document.getElementById('holder'),
    elementList = holder.children,
    elementOffset,
    startTime = new Date().getTime(),
    time = 0;

var size = function () {
    w = Math.round(window.innerWidth / 2);
    h = Math.round(window.innerHeight / 2);
};

var updateElement = function(element) {
    var t = element; //for brevity
    if (settings.tangentWithinATangent) {
        t.x = Math.tan(Math.tan((elementOffset * t.index) + (settings.speedMultiplier * time)) * deg * settings.innerTangentMultiplier) * settings.outerTangentMultiplier;
    } else {
        t.x = Math.tan((elementOffset * t.index) + (settings.speedMultiplier * time)) * settings.outerTangentMultiplier;
    }
    t.abs = Math.abs(t.x);
    t.polarity = t.x / t.abs;
    if(t.abs > w + elementWidth) { //prevent flicker on edges when number is too large to render
        element.x = (w + elementWidth) * t.polarity;
    }
    t.style.left = Math.round(t.x + w) + 'px';
    t.style.top = Math.round(t.y + h) + 'px';
    //console.log(index, element.x);
};

var init = function() {
    var i,
        len = settings.numDots,
        item;
    if (len % 2 === 1) { //odd
        elementOffset = tau / len;
    } else { //even
        elementOffset = tau / (len + 1);
    }
    holder.innerHTML = '';
    for (i = 0; i < len; i += 1) {
        item = document.createElement('li');
        item.innerText = i + 1;
        item.x = 0;
        item.y = 0;
        item.index = i;
        holder.appendChild(item);
    }
};
var update = function() {
    var i,
        len = elementList.length,
        item;
    size();
    time = (new Date().getTime() - startTime) / 1000;
    for (i = 0; i < len; i += 1) {
        item =...