Animations

Linkedin loader in CSS with source code

In this post, we are going to create the LinkedIn loader in CSS with Html. In the last post, we created 3D Social media icons . In this post, we will focus on how to create the loading animation of LinkedIn.

Linkedin loader in CSS:

Linkedin is a social media application/platform. It works as a job portal and it is very famous for sellers and buyers. When you open the LinkedIn app then it shows an animation of lading at the beginning. We have created that animation of LinkedIn and it is created with the help of HTML and CSS only.

As you can see in the image we have created a LinkedIn loading animation in HTML and CSS. It has a background on LinkedIn. Then it has the logo of LinkedIn at the center of the page. Below this logo, it has a progress bar line that animates and shows the loading of Linkedin. It does not need to refresh to show its animation again and again. It is infinite loop animation and it animates without stopping a single time. We will also create it using Html and CSS and the code will be available for everyone to copy and paste for you. Therefore, you can also like it also.

How to create a Linkedin loader in CSS?

For creating this loading animation we will use Html and CSS for it. For that, we have to download a code editor so, that we can write Html and CSS in that code editor. It will help us to build it easily without facing any errors.

Source code of LinkedIn loader in HTML:

Html is a markup language and we will use it to create the skeleton of the project in it. So, its source code is available below and you can copy it for your use.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="loading-screen">
      <div class="loading-animation">
        <img src="logo.png" alt="" class="logo">
        <div class="loading-bar"></div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

Source code of CSS:

CSS is used to design web pages and it is also a part of the web page. It will help us to import the logo of Linkedin and then this loading animation is created with the help of CSS. Code for design is available below. Create a file and then paste code in that file and link it with the Html file.

*{
  margin: 0;
  padding: 0;
}

.loading-screen{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo{
  width: 48px;
  height: 48px;
}

.loading-bar{
  width: 130px;
  height: 2px;
  background: #cfcfcf;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}

.loading-bar::before{
  content: "";
  width: 68px;
  height: 2px;
  background: #0073b1;
  position: absolute;
  left: -34px;
  animation: bluebar 1.5s infinite ease;
}

@keyframes bluebar {
  50%{
    left: 96px;
  }
}

margin: 0;

padding: 0;

}

.loading-screen{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

background: #f5f5f5;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

}

.logo{

width: 48px;

height: 48px;

}

.loading-bar{

width: 130px;

height: 2px;

background: #cfcfcf;

margin-top: 22px;

position: relative;

overflow: hidden;

}

.loading-bar::before{

content: "";

width: 68px;

height: 2px;

background: #0073b1;

position: absolute;

left: -34px;

animation: bluebar 1.5s infinite ease;

}

@keyframes bluebar {

50%{

left: 96px;

}

In this way by pasting both the codes and linking both files of Html and CSS you can create a LinkedIn loading animation.

Download source code:

If you don’t know how to create files of Html and CSS and then connect them with each other then we have created a solution to your problem. The source code file is given below and you can download it. Then run the HTML file and the result will be there in your browser.

Task:

You have learned how to build a LinkedIn loader in HTML CSS language. Now let’s add some extra things to it. Change the duration of this loader. Below this loader add a heading of <h3>. In that heading write “Welcome to the Land of Professionals”. Provide the color to text as blue and the font family as Arial.

I hope it was a helpful post for all of you on how to create the Linkedin loading animation in Html and CSS.

So, thanks for reading this article.

Go to top

Download Source CodeClick to Download