Ads Top

CSS Loading

How to create loader in CSS: We can use animation property for the CSS Loader also use property of the after and before with absolute CSS property. You can understand with this example:

HTML Code:
<div class="loading">Processing your submitted form <span>.</span><span>.</span><span>.</span></div>
    <br><br>
    <div class="loadingCircle"></div>

CSS Code: 

<style>
        .loading span {
            animation-name: loadingAni;
            animation-duration: 1.4s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
            font-size: 40px;
            font-weight: 700;
            color: green;
        }
        .loading span:nth-child(2) {
            animation-delay: .2s;
        }
        .loading span:nth-child(3) {
            animation-delay: .4s;
        }
        @keyframes loadingAni {
            0% {
                opacity: .2;
            }
            20% {
                opacity: 1;
            }
            100% {
                opacity: .2;
            }
        }
        .loadingCircle {
            border: 5px solid #f3f3f3;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: relative;
        }
        .loadingCircle::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: #0bf;
            border-radius: 50%;
            top: 17px;
        }
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>

  Also you can visit at the https://embed.plnkr.co/D09479dIXms5Zoeretoj/

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.