Loading animation in CSS

      No Comments on Loading animation in CSS

Loading animation in CSS. Use simple loaders in website.

Loading animation in CSS

Demo:

See the Pen Loading animation by scanfcode (@scanfcode) on CodePen.

HTML markup:

<div class="container">
	<div class="row">  
        <div class="animation">
            <div class="loading"></div>
        </div>
	</div>
</div>

CSS:

.animation {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
.loading {
    animation: 1.5s linear 0s normal none infinite running loading;
    background: #ff0066 none repeat scroll 0 0;
    border-radius: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    width: 50px;
}
.loading::after {
    animation: 1.5s linear 0s normal none infinite running loading_after;
    border-color: #cc0066 transparent;
    border-radius: 80px;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 80px;
    left: -15px;
    position: absolute;
    top: -15px;
    width: 80px;
}
@keyframes loading {
0% {
    transform: rotate(0deg);
}
50% {
    background: #cc0066 none repeat scroll 0 0;
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}

Loading animation in CSS

Summary
Loading animation in CSS
Article Name
Loading animation in CSS
Description
Loading animation in CSS. Use simple loaders in website.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *