LieutenantChips/loadingBall.html Secret

## loadingBall.html
<!DOCTYPE html>


<html>

    <head>
        <script src="https://d3js.org/d3.v4.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script>

            function makeBall(){
                var svg = d3.select("svg");
                svg.append("circle")
                    .attr("class","mainBall")
                    .attr("r", "30px")
                    .attr("cx", "50%")
                    .attr("cy", "20%");

                var width = $("svg").width();
                width = width * 0.5;

                var newW = width + 25;
                svg.append("circle")
                    .attr("id", "hiding1")
                    .attr("class","hiding")
                    .attr("r", "30px")
                    .attr("cx", newW)
                    .attr("cy", "20%");


                newW = width - 25;
                svg.append("circle")
                    .attr("id", "hiding2")
                    .attr("class","hiding")
                    .attr("r", "30px")
                    .attr("cx", newW)
                    .attr("cy", "20%");

                svg.append("circle")
                    .attr("class", "topCircle")
                    .style("opacity", "0")
                    .attr("r", "5px")
                    .attr("cx", "50%")
                    .attr("cy", "20%");

                var height = $("svg").height();
                height = height * 0.2 + 100;

                svg.append("circle")
                    .attr("class", "bottomCircle")
                    .style("opacity", "1")
                    .attr("r", "5px")
                    .attr("cx", "50%")
                    .attr("cy", height);


            }

            function toggleBall(className){
                var ball = d3.select("." + className);
                var opa = ball.style("opacity");
                if(opa == 1){
                    ball.transition()
                            .duration(500)
                            .style("opacity", "0");
                }else{
                    ball.transition()
                            .duration(500)
                            .style("opacity", "1");
                }
            }

            function gravity(){
                var ballMain = d3.select(".mainBall")
                                .transition()
                                    .duration(1000)
                                    .attr("transform","translate(0," + 100 + ")")
                                    .on("start", function(){ toggleBall("topCircle"); })
                                .transition()
                                    .duration(1000)
                                    .attr("transform","translate(0," + 0 + ")")
                                    .on("start", function(){ toggleBall("bottomCircle"); })
                                .transition()
                                    .on("start", gravity);

                var baseHeight = $("svg").height() * 0.2;
                var newHeight = baseHeight + 100;
                var baseWidth = $("svg").width() * 0.5;


                var ball = d3.select("#hiding1")
                                .transition()
                                    .duration(1000)
                                    .attr("transform","translate(0," + 100 + ")")
                                    .on("start", function(){ toggleBall("topCircle"); })
                                .transition()
                                    .duration(1000)
                                    .attr("transform","translate(0," + 0 + ")")
                                    .on("start", function(){ toggleBall("bottomCircle"); })
                                .transition()
                                    .on("start", gravity);


                var ball = d3.select("#hiding2")
                                .transition()
                                    .duration(1000)
                                    .attr("transform","translate(0," + 100 + ")")
                                    .on("start", function(){ toggleBall("topCircle"); })
                                .transition()
                                    .duration(1000)
                                    .attr("transform","translate(0," + 0 + ")")
                                    .on("start", function(){ toggleBall("bottomCircle"); })
                                .transition()
                                    .on("start", gravity);


                //ball.attr("transition-timing-function('exp')");
            }

            $(document).ready(function() {
                var svg = d3.select("svg")
                            .attr("width", "100%")
                            .attr("height", "250px");
                makeBall();
                gravity();
            });
        </script>

        <style>
            circle{
                fill : #00c3ff;
            }
            circle.hiding{
                fill : #0f0f11;
            }

            body{
                background-color:#0f0f11;
            }
        </style>
    </head>

    <body>
        <svg>
        </svg>

    </body>

</html>
	<!DOCTYPE html>


	<html>

	<head>
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<script>

	function makeBall(){
	var svg = d3.select("svg");
	svg.append("circle")
	.attr("class","mainBall")
	.attr("r", "30px")
	.attr("cx", "50%")
	.attr("cy", "20%");

	var width = $("svg").width();
	width = width * 0.5;

	var newW = width + 25;
	svg.append("circle")
	.attr("id", "hiding1")
	.attr("class","hiding")
	.attr("r", "30px")
	.attr("cx", newW)
	.attr("cy", "20%");


	newW = width - 25;
	svg.append("circle")
	.attr("id", "hiding2")
	.attr("class","hiding")
	.attr("r", "30px")
	.attr("cx", newW)
	.attr("cy", "20%");

	svg.append("circle")
	.attr("class", "topCircle")
	.style("opacity", "0")
	.attr("r", "5px")
	.attr("cx", "50%")
	.attr("cy", "20%");

	var height = $("svg").height();
	height = height * 0.2 + 100;

	svg.append("circle")
	.attr("class", "bottomCircle")
	.style("opacity", "1")
	.attr("r", "5px")
	.attr("cx", "50%")
	.attr("cy", height);



	}

	function toggleBall(className){
	var ball = d3.select("." + className);
	var opa = ball.style("opacity");
	if(opa == 1){
	ball.transition()
	.duration(500)
	.style("opacity", "0");
	}else{
	ball.transition()
	.duration(500)
	.style("opacity", "1");
	}
	}

	function gravity(){
	var ballMain = d3.select(".mainBall")
	.transition()
	.duration(1000)
	.attr("transform","translate(0," + 100 + ")")
	.on("start", function(){ toggleBall("topCircle"); })
	.transition()
	.duration(1000)
	.attr("transform","translate(0," + 0 + ")")
	.on("start", function(){ toggleBall("bottomCircle"); })
	.transition()
	.on("start", gravity);

	var baseHeight = $("svg").height() * 0.2;
	var newHeight = baseHeight + 100;
	var baseWidth = $("svg").width() * 0.5;


	var ball = d3.select("#hiding1")
	.transition()
	.duration(1000)
	.attr("transform","translate(0," + 100 + ")")
	.on("start", function(){ toggleBall("topCircle"); })
	.transition()
	.duration(1000)
	.attr("transform","translate(0," + 0 + ")")
	.on("start", function(){ toggleBall("bottomCircle"); })
	.transition()
	.on("start", gravity);


	var ball = d3.select("#hiding2")
	.transition()
	.duration(1000)
	.attr("transform","translate(0," + 100 + ")")
	.on("start", function(){ toggleBall("topCircle"); })
	.transition()
	.duration(1000)
	.attr("transform","translate(0," + 0 + ")")
	.on("start", function(){ toggleBall("bottomCircle"); })
	.transition()
	.on("start", gravity);



	//ball.attr("transition-timing-function('exp')");
	}

	$(document).ready(function() {
	var svg = d3.select("svg")
	.attr("width", "100%")
	.attr("height", "250px");
	makeBall();
	gravity();
	});
	</script>

	<style>
	circle{
	fill : #00c3ff;
	}
	circle.hiding{
	fill : #0f0f11;
	}

	body{
	background-color:#0f0f11;
	}
	</style>
	</head>

	<body>
	<svg>
	</svg>

	</body>

	</html>