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.
<div id="loading-page">
    <div id="square-container">
    </div>
</div>

#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);
    }
}

0 thảo luận về CSS Loading Page Animation Effects | CSS Animation

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục