Default loader

$('#loader').shCircleLoader();

---

Counterclockwise direction

$('#loader').shCircleLoader({clockwise: false});

---

Custom color

$('#loader').shCircleLoader({color: "red"});

---

Custom duration

$('#loader').shCircleLoader({duration: 2});

---

Custom dots

$('#loader').shCircleLoader({
    dots: 24,
    dotsRadius: 10
});

---

Custom dot animation

$('#loader').shCircleLoader({
    keyframes:
       "0%   {background:black}\
        40%  {background:transparent}\
        60%  {background:transparent}\
        100% {background:black}"
});

---

Custom namespace

$('#loader').shCircleLoader({
    namespace: "myns",
    color: "transparent",
    dotsRadius: 15
});

CSS:

.myns > div {
    box-shadow: 0 0 6px black, inset 0 0 6px black;
}

---

Two Fireballs

$('#loader').shCircleLoader({
    color: "red",
    dots: 24,
    dotsRadius: 13,
    keyframes:
       "0%   {background: red;    {prefix}transform: scale(1)}\
        20%  {background: orange; {prefix}transform: scale(.4)}\
        40%  {background: red;    {prefix}transform: scale(0)}\
        50%  {background: red;    {prefix}transform: scale(1)}\
        70%  {background: orange; {prefix}transform: scale(.4)}\
        90%  {background: red;    {prefix}transform: scale(0)}\
        100% {background: red;    {prefix}transform: scale(1)}"
});

---

Progress status

$('#loader').shCircleLoader();
var i = 0;
setInterval(function() {
    $('#loader').shCircleLoader('progress', i + '%');
    if (++i > 100) i = 0;
}, 100);