Build a CSS3 loading animation with logo

In this tutorial, you will learn how to use HTML5 and CSS3 to make a loader

Build a CSS3 loading animation with logo

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

 

Last modified