How to Make Page Loader Using JavaScript and CSS Animation

Create your Page Loader Using JavaScript and CSS Animation. It is very simple, here we have used pure JavaScript and CSS3 animation. Nowadays, if a website takes more time to load, then users will not stay for the result, because users can’t wait. They simply close the page and go to other websites.

HTML

<div class="loader">
    <div class="circle"><span></span></div>
    <label>Loading…</label>
</div>

CSS

.loader {
    position: fixed;
    left: 0;
    right: 0;
    top: 40%;
    font-family: arial;
}
.loader label {
    text-align: center;
    display: block;
    margin-top: 70px;
    font-size: 25px;
    letter-spacing: 2px;
    color: #FF9800;
}
.circle span {
    width: 40px;
    height: 40px;
    display: block;
    background-color: #FFC107;
    border-radius: 100%;
    margin: 0 auto;
}
.circle {
    border: 10px solid #FF9800;
    padding: 10px;
    width: 100px;
    border-radius: 100px;
    border-top: 0px;
    border-bottom: 0px;
    margin: 0 auto;
    -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); }
}

JavaScript

// Set loading time
var timeOut;
function loading() {
    timeOut = setTimeout(showResult, 3000);
}

// Show/Hide content JavaScript
function showResult() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("content").style.display = "block";
}