Simple CSS Loader

Simple CSS Loader

by Adi Jaya

HTML

<div id="loader-container">

    <div class="loader-content">
        <div class="loader"></div>
        <div class="loader-text">Loading</div>
    </div>
    

</div>

CSS

body {
    margin: 0;
}

#loader-container {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: #013940;
    z-index: 10000;
    text-align: center;
}

.loader-content {
    position: relative;
    top: 25%;
}

.loader {
    border: 4px solid #03A9F4;
    border-radius: 50%;
    border-top: 4px solid #caf9ff;
    border-bottom: 4px solid #caf9ff;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1s ease-out infinite;
    animation: spin 1s ease-out infinite;
    display: inline-block;
    background: #4ea2c7;
    box-shadow: 0 0 13px 4px #8adbff;
}

.loader-text {
    text-align: center;
    margin-top: 0.5em;
    font-size: 1.5em;
    font-family: sans-serif;
    color: #00BCD4;
    text-shadow: 1px 1px #004a54;
    animation: color 3s linear infinite;
}

@-webkit-keyframes shin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes color {
    0% { color: #00BCD4; }
    50% { color: #ffffff; }
    100% { color: #00BCD4; }
}