We will make a simple loader containing our logo shows beautifully, let's start.
Build the HTML structure
we will start with a DIV attribute and give it a 'container' class which will contain the project
inside it, we will put a dive attribute and give it a 'circle' class and Img which will contain our logo Link
<div class="container">
<div class="circle"></div>
<img class="loadLogo" src="Your-logo-link" >
</div>
We have now finished building the structure we will start to
Add the CSS3 style and animation
We put the FR element in the middle of the page using CSS3 flex-grid system
and set the position: relative and margin-top: 80px .
.container{
display:flex;
justify-content:center;
position:relative;
margin-top:80px;
}
in the circle class, we will set the position: absolute, make some border styling and set width: 100px; height :100px.
.circle {
position:absolute;
border-radius:50%;
border:5px solid #fff;
border-top:5px solid #47ad47;
border-bottom:5px solid #47ad47;
width:100px;
height:100px;
}
now we will add a CSS3 animation by using to make animation
@keyframes animation-name{/*animation*/}
and to apply the effect to the selected element we use
animation: animation-name
time-in-seconds
animation-type
number-of-movements
make an animation keyframes
@keyframes circleAnimation {
0%{}
100%{
transform:rotate(360deg)
}
}
and apply the effect to the circle class
.circle {
.
.
.
animation: circleAnimation 2s linear infinite;
}
the animation will take the linear effect and infinite loop
in the 'loaderLogo' class, we will set the position: absolute, set width: 75px; top:10px
and set the loaderLogoAnimation to take the ease-in-out effect and infinite loop
.loaderLogo{
position:absolute;
width:75px;
top:10px;
animation: loaderLogoAnimation 2s ease-in-out infinite;
}
we will make the @keyframes loaderLogoAnimation{}
@keyframes loaderLogoAnimation {
0% ,100%{opacity:0;}
50%{
opacity:1;
}
}
Now we have finished working on CSS3 loading animation with logo
to see full code work On Codepen