CSS Single Element Colorful Spinners - Pure CSS Preloader Screen Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Colorful Spinners đơn giản nhưng không khó để thực hiện được.
<div id="loading-page">
    <div class="circle"></div>
</div>

#loading-page {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 50vh;
    width: 100%;
    .circle {
        position: relative;
        width: 100px;
        height: 100px;
        border:4px solid transparent;
        border-bottom:4px solid #fff958;
        border-top:4px solid #b858ff;
        border-radius: 100%;
        -webkit-animation: loading 2s linear infinite;
                animation: loading 2s linear infinite;
        &amp;:before,&amp;:after {
            content: "";
            position: absolute;
            border:4px solid transparent;
            border-radius: 100%;
        }
        &amp;:before {
            top: 10px;
            left: 10px;
            bottom: 10px;
            right: 10px;
            border-bottom:4px solid #e74c3c;
            border-top:4px solid #3ce7d8;
            -webkit-animation: loading 2s linear infinite;
                    animation: loading 2s linear infinite;
        }
        &amp;:after {
            top: 24px;
            left: 24px;
            bottom: 24px;
            right: 24px;
            border-bottom:4px solid #39ff8d;
            border-top:4px solid #ff67ad;
            -webkit-animation: loading 4s linear infinite;
                    animation: loading 4s linear infinite;
        }
    }
}
@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

0 thảo luận về CSS Single Element Colorful Spinners - Pure CSS Preloader Screen Tutorial

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