JSFiddle - React, Tailwind, and code Playground

by bombo

CSS

body {
    height: 300px;
    border: 1px solid black;
}

JavaScript

(function ($) {

    var settings = {
            duration: 500,
            size: 4,
            elementWidth: 30,
            ease: 'easeInExpo',
            centered: true,
            knightrider: true,
            'z-index': 'auto',
            colors : {
                self: '#ddd',
                inactive: '#ccc',
                active: '#222'
            },
            stopCallback: function () {
                return false;
            }
        };
    
    $.fn.loading = function (options) {
        var isNewElement = this.length === 0,
            $this = !isNewElement ? this : $('<div />'),
            $element = $('<span />'),
            cssSelf, cssElements, i,
            dir = true;

        function doLoading(index) {
            $this.children().eq(index).animate({
                backgroundColor: settings.colors.inactive
            }, settings.duration, settings.ease);
            if (settings.knightrider) {
                index = (dir ? index + 1 : index - 1);
                if (index === (settings.size - 1) || index === 0) {
                    dir = !dir;
                }
            } else {
                index = (index === (settings.size - 1) ? 0 : index + 1);
            }
            $this.children().eq(index).animate({
                backgroundColor: settings.colors.active
            }, settings.duration, settings.ease, function () {
                if (!settings.stopCallback()) {
                    doLoading(index);
                }
            });
        }
        
        $.extend(settings, options);
        
        cssSelf = {
            'border-radius': 5,
            'padding': 5,
            'height': settings.elementWidth,
            'width': ((settings.elementWidth * settings.size) + ((settings.size - 1) * 5)),
            'position': 'fixed',
            'background': settings.colors.self,
            'z-index': settings['z-index']
        };
        
        if (settings.centered) {
            cssSelf.top...