JSFiddle - React, Tailwind, and code Playground

by baer baer

HTML

<div class="tab" id="tab1">
	Einstellungen
</div>

<div class="tab" id="tab2">
	Regeln
</div>

<div class="tab" id="tab3">
	Private
</div>

<div id="Loading" style="display: none">
    <div name="dotContainer">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>

CSS

* {
    background: black; 
    color: white;
}
div[name=dotContainer] .dot {
    position: relative; 
    top: -7px; 
	left: -12px; 
	right: -12px; 
	width: 5px; 
    height: 5px; 
    margin-left: -5px; 
/*    background-color: rgba(0, 176, 240, 0.7);  */
    background-color: rgba(255, 255, 255, 0.6); 
	border-radius: 0px;
    left: 0; 
	float: left; 

} 
	
.tab {
	margin: 0;
	margin-right: 4px; 
	text-align: center; 
	padding: 7px; 
	border: 0px solid #f30; 
	width: 220px; 
	height: 30px; 
	font-weight: bold;
	font-size: 140%; 
	float: left;
	border-radius: 5px;
	
	background-image: -webkit-linear-gradient(top left, rgba(0, 176, 240, 0.5) 0%, rgba(0, 0, 0, 0.5) 80%); 
	background-image: -moz-linear-gradient(right bottom, rgba(0, 176, 240, 0.5) 0%, rgba(0, 0, 0, 0.5) 80%); 
	background-image: -o-linear-gradient(rgba(0, 176, 240, 0.5) 0%, rgba(0, 0, 0, 0.5) 80%); 
	background-image: linear-gradient(rgba(0, 176, 240, 0.5) 0%, rgba(0, 0, 0, 0.5) 80%);
}
	
.tab:hover {
	cursor: pointer;
	background-image: -webkit-linear-gradient(top left, rgba(0,0,0, 0.5) 20%, rgba(0, 176, 240, 0.5) 100%); 
	background-image: -moz-linear-gradient(right bottom, rgba(0,0,0, 0.5) 20%, rgba(0, 176, 240, 0.5) 100%); 
	background-image: -o-linear-gradient(rgba(0,0,0, 0.5) 20%, rgba(0, 176, 240, 0.5) 100%); 
	background-image: linear-gradient(rgba(0,0,0, 0.5) 20%, rgba(0, 176, 240, 0.5) 100%);
}

JavaScript

var loading;
$(document).ready(function() {
    loading = true;
    $(".dot").each(function(index) {
        moveDot($(this), index);
    });
});

function sinh(aValue) {
    var myTerm1 = Math.pow(Math.E, aValue);
    var myTerm2 = Math.pow(Math.E, -aValue);
    return (myTerm1-myTerm2)/2;
} 

$.easing.speedInOut = function(x, t, b, c, d) {
    return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) / (sinh(2.5) * 1.82);
}; 

function moveDot(dotItem, delay) {
    if (loading){
        dotItem.delay(delay * 200).css('left', '0%').animate({
            left: '100%'
        }, 2000, 'speedInOut',  function() {
            moveDot(dotItem, 0);
        });
    }
}
	
$("#tab1").prepend( $("#Loading").html() )
$("#tab2").prepend( $("#Loading").html() )
$("#tab3").prepend( $("#Loading").html() )

$('#tab2 [name="dotContainer"]').remove()
//$("#tab2")dotContainer