JSFiddle - React, Tailwind, and code Playground

by redler

HTML

<div id="foo">Test</div>

CSS

#foo { padding: 10px; background-color: gray; border: 1px solid black; width: 50px; height: 20px; 

    position: absolute;
    
    left: 100px;
        top: 100px;

    
    opacity: 0.3;

/* Firefox */
-moz-transition: all 1s ease;

/* WebKit */

-webkit-transition: all 1s ease;

/* Opera */

-o-transition: all 1s ease;

/* Standard */

transition: all 1s ease;
    
    box-shadow: 0 4px 4px rgba(0,0,0,0.75);
    
}

JavaScript

(function orbit() {

    var f = $('#foo');

    var rotatecycle = function rotatecycle(f) {

        var radius = 4;

        var circle = function circle(radius, steps, centerX, centerY) {
            var xval, yval, path = [],
                phase;

            for (var i = 0; i < steps; i++) {
                phase = 2 * Math.PI * i / steps;
                xval = (centerX + radius * Math.cos(phase)).toFixed(0);
                yval = (centerY + radius * Math.sin(phase)).toFixed(0);
                path.push([xval, yval]);
            }

            return path;
        };

        var path = circle(radius, 8, f.offset().left, f.offset().top);


        $.each(path, function(i, e) {
            f.delay(500).queue(function(next) {
                f.offset({
                    top: e[0],
                    left: e[1]
                });
                next();
            });
        });

    };
    rotatecycle(f);

    var go = setInterval(function() {
        rotatecycle(f);
    }, 0);




}());