Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <!--Adding JQ CDN for your since you want to use JQ -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
​
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #redSquare {
            display: none;
            width: 100vw;
            height: 100vh;
            background-color: crimson;
        }
​
        /* Center the loader */
        #loader {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }
​
​
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
​
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
​
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
​
            100% {
                transform: rotate(360deg);
            }
        }
​
        /* Add animation to "page content" */
        .animate-bottom {
            position: relative;
            -webkit-animation-name: animatebottom;
            -webkit-animation-duration: 1s;
            animation-name: animatebottom;
            animation-duration: 1s
        }
​
        @-webkit-keyframes animatebottom {
            from {
                bottom: -100px;
                opacity: 0
            }
​
            to {
                bottom: 0px;
                opacity: 1
            }
        }
​
        @keyframes animatebottom {
            from {
                bottom: -100px;
                opacity: 0
            }
​
            to {
                bottom: 0;
                opacity: 1
            }
        }
​
        #myDiv {
            display: none;
            text-align: center;
        }
​
        #randomEmail {
            color: white;
            background-color: red;
        }
    </style>
</head>
​
<body onload="myFunction()" style="margin:0;">
​
    <div id="redSquare">
        <!--Making this Appear for 3 Seconds prior to Ajax...-->
    </div>
​
    <div id="loader"></div>
​
    <div style="display:none;" id="myDiv" class="animate-bottom">
        <h2>Tada!</h2>
        <p>Some text in my newly loaded page..</p>
        <h1>
            RandomEmail: <span id="randomEmail"></span>
        </h1>
    </div>
​
    <script>
        function showPage() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("myDiv").style.display = "block";
        };
        function myFunction() {
            //Showing a Div prior to call as promised...
            $("#redSquare").fadeIn(3000).fadeOut(3000, function () {
​
                //Making the following API Call that will receive a random email from a random user...
                $.ajax({
                    url: 'https://randomuser.me/api/',
                    dataType: 'json',
                    success: showPage
                }).done(function (res, req) {
                    //Spitting out information about the HTTP call made...
                    console.log(res);
                    console.log(req);
                    //Storing the email in the following variable...
                    var RandomEmail = res.results[0].email;
                    //Displaying the email in the console...
                    console.log(RandomEmail);
                    //Injecting the following email to the DOM
                    document.getElementById("randomEmail").innerHTML = RandomEmail;
                });
                //When the body loads... render this function as seen in the body HTML tag with the onload...
            });
        }
    </script>
</body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MrFinipro
0viewers