Skip to main content

Profile Card Skeleton Screen | HTML, CSS And Bootstrap

by Rustcode
Profile-Card-Skeleton-Screen-html-css-and-bootstrap

Profile Card Skeleton Screen | HTML, CSS And Bootstrap

"Profile Card Skeleton Screen" is a general animation that is usually used by a lot of websites like news, social media websites. Before going toward the design part of the skeleton screen effect let's understand what this effect means and why currently most of the websites using in front end website design. In this effect, a loading bar appears instead of the website content and a skeleton screen appears until the entire website content is loaded.

The Skeleton effect is a kind of website content loading effect that is designed according to a page component. Indirectly it is a prototype or the surface of the website content. Like human bones is the skeleton of the body. You can see the demo of that effect.

Skeleton-Screen-Demo

Why nowadays most websites are using this effect because it gives a much better website user experience than other boring loading effects. We also created many tutorials on the loading effect, you can access that loading animation playlists.


01. Include Bootstrap Link

We are using bootstrap to design the skeleton screen effect, so first, we include the bootstrap css file which will be included like this. First create html document like this.

<!DOCTYPE html>
<html>
  <head>
    <title>Profile Card Skeleton Screen | Rustcode</title>
  </head>
  <body>
   // html code 
</body>
</html>


Now let's include the bootstrap link into that HTML document structure. We will add CSS file of bootstrap in this head of the HTML document. In this animation only CSS is required so only one link we are including otherwise you can use javascript also.

Bootstrap Link:
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


Now, this document is ready to use all CSS classes of the bootstrap file. Final document will look like this.

<!DOCTYPE html>
<html>
<head>
    <title>Profile Card Skeleton Screen | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
</head>

<body>
  // html code
</body>
</html>


02. HTML

We are splitting this design into upper and lower two parts, as this skeleton is developed for profile cards. You can choose any other website component.

<!DOCTYPE html>
<html>
<head>
	<title>Profile Card Skeleton Screen | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body>

<div class="container height-vh d-flex justify-content-center align-items-center">
    <div class="card-container">
        <div class="card-upper-container inner-card animate-pulse"></div>
        <div class="card-lower-container p-3">
            
                <div class="col-12 inner-card animate-pulse mb-3"> </div>
                <div class="col-12 inner-card animate-pulse mb-3"> </div>
                <div class="col-12 inner-card animate-pulse mb-3"> </div>
           
        </div>
    </div>
</div>

</body>
</html>

This code is not ready yet only html is done because the default design of Bootstrap is working. We will add our css in next step.


03. CSS

Because of Bootstrap, we are writing very small CSS as Bootstrap has predefined classes which make web development work easy. So let's see the CSS code. There are three main methods to include css in HTML documents.

body {
    background-color: #d1d1d1;
}

.height-vh{
    height: 100vh;
}

.card-container {
    border: none;
    width: 250px;
    border-radius: 0px !important;
    border:  1px solid lightgrey;
    overflow: hidden;
}

.inner-card {
    height: 20px;
    background-repeat: no-repeat;
    background-image: linear-gradient(lightgrey 100%, transparent 0);
}

.card-upper-container {
    height: 200px;
    background-color: #eee
}

.card-lower-container {
    height: 130px
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

@keyframes pulse {
    50% {
        opacity: 0.4;
    }
}


04. Youtube Video

We also made a youtube video for this animation if you want to watch and want to learn every step of this design.



05. Source Code

it would be good if you try this code by yourself otherwise you can download it from GitHub.


Comments

Post a Comment