CSS Loading Page Animation Effects | CSS Animation

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Loading Page Animation đơn giản nhưng không khó để thực hiện được.

Danh mục

Effects Navigations Templates UX Patterns Plugin

Tags

#preloader

DEMO

HTML

<div id="loading-page">
    <div id="square-container">
    </div>
</div>

SCSS

#loading-page {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50vh;
    width: 100%;
    #square-container {
        width: 10px;
        height: 10px;
        background-color: #2ecc71;
        border-radius: 100%;
        -webkit-animation: loading 1s linear infinite;
                animation: loading 1s linear infinite;
    }
}
@-webkit-keyframes loading {
    0%{
        -webkit-box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25%{
        -webkit-box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db
    }
    50%{
        -webkit-box-shadow: -10px 0 0 #e74c3c, 100px 0 0 #3498db;
                box-shadow: -10px 0 0 #e74c3c, 100px 0 0 #3498db
    }
    75%{
        -webkit-box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db
    }
    100%{
        -webkit-box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes loading {
    0%{
        -webkit-box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25%{
        -webkit-box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db
    }
    50%{
        -webkit-box-shadow: -10px 0 0 #e74c3c, 100px 0 0 #3498db;
                box-shadow: -10px 0 0 #e74c3c, 100px 0 0 #3498db
    }
    75%{
        -webkit-box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -10px 0 0 #e74c3c, 10px 0 0 #3498db
    }
    100%{
        -webkit-box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
                box-shadow: -100px 0 0 #e74c3c, 10px 0 0 #3498db;
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}