Skeleton mode

In this example below you will see how to do a Skeleton mode with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by monjer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright monjer ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Skeleton mode</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="skeleton">
  <h2>Skeleton sidebar</h2>
  <div class="skeleton-sidebar">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <h2>Skeleton media list</h2>
  <div class="skeleton-media-list">
    <ul>
      <li>
        <div class="avatar"></div>
        <div class="main">
          <div class="title"></div>
          <div class="content"></div>
        </div>
      </li>
      <li>
        <div class="avatar"></div>
        <div class="main">
          <div class="title"></div>
          <div class="content"></div>
        </div>
      </li>
      <li>
        <div class="avatar"></div>
        <div class="main">
          <div class="title"></div>
          <div class="content"></div>
        </div>
      </li>
      <li>
        <div class="avatar"></div>
        <div class="main">
          <div class="title"></div>
          <div class="content"></div>
        </div>
      </li>
    </ul>
  </div>
  <h2>Skeleton page layout</h2>
  <div class="skeleton-layout">
    <div class="sidebar"></div>
    <div class="main-content">
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/monjer/skeleton-mode-dJaeLe */
.skeleton {
  margin-left: 100px;
}
.skeleton .skeleton-sidebar {
  width: 240px;
}
.skeleton .skeleton-sidebar ul {
  list-style: none;
  padding: 0;
}
.skeleton .skeleton-sidebar li {
  margin-left: 0;
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.skeleton .skeleton-sidebar li:before, .skeleton .skeleton-sidebar li:after {
  display: block;
  content: "";
  background-color: #f0f0f0;
}
.skeleton .skeleton-sidebar li:before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.skeleton .skeleton-sidebar li:after {
  width: 80%;
  height: 24px;
  margin-left: 10px;
  border-radius: 3px;
}
.skeleton .skeleton-media-list {
  width: 600px;
}
.skeleton .skeleton-media-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.skeleton .skeleton-media-list li {
  margin-bottom: 20px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  padding: 15px;
  display: flex;
  align-items: top;
}
.skeleton .skeleton-media-list li .avatar,
.skeleton .skeleton-media-list li .title,
.skeleton .skeleton-media-list li .content {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.skeleton .skeleton-media-list li .avatar {
  width: 40px;
  height: 40px;
}
.skeleton .skeleton-media-list li .main {
  margin-left: 20px;
  flex: 1;
}
.skeleton .skeleton-media-list li .main .title {
  height: 30px;
  margin-bottom: 15px;
}
.skeleton .skeleton-media-list li .main .content {
  height: 100px;
}
.skeleton .skeleton-layout {
  display: flex;
  width: 600px;
  border-radius: 3px;
}
.skeleton .skeleton-layout .sidebar,
.skeleton .skeleton-layout .section {
  background-color: #f0f0f0;
}
.skeleton .skeleton-layout .sidebar {
  height: 200px;
  width: 140px;
}
.skeleton .skeleton-layout .main-content {
  margin-left: 15px;
  flex: 1;
}
.skeleton .skeleton-layout .section {
  height: 100px;
  margin-bottom: 15px;
}

Comments