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:
CSS Code:
Also you can visit at the https://embed.plnkr.co/D09479dIXms5Zoeretoj/
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>
No comments:
Note: Only a member of this blog may post a comment.