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.

Danh mục

Effects Navigations Templates UX Patterns Plugin

Tags

#preloader

DEMO

HTML

<div id="loading-page">
    <div class="circle"></div>
</div>

SCSS

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