Pure CSS Book Loader | Book Loader Html Css – Codewithrandom







Pure CSS Book Loader | Book Loader Html Css – Codewithrandom

Welcome๐ŸŽ‰ to Code With Random blog. We learn how to create a Pure CSS Book Loader in this blog. We use HTML & CSS  for Pure CSS Book Loader. Hope you enjoy our blog so let’s start with a basic HTML structure for the Pure CSS Book Loader. 

HTML code

 <div class="book">  
<div class="inner">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

There is all HTML code for the Pure CSS Book Loader. Now, you can see output without CSS, then we write CSS for the Pure CSS Book Loader.

Output

Pure CSS Book Loader | Book Loader Html Css - Codewithrandom

CSS(SCSS) code

 .book {  
--color: #fff;
--duration: 6.8s;
width: 32px;
height: 12px;
position: relative;
margin: 32px 0 0 0;
//Demo
zoom: 1.5;
.inner {
width: 32px;
height: 12px;
position: relative;
transform-origin: 2px 2px;
transform: rotateZ(-90deg);
animation: book var(--duration) ease infinite;
.left,
.right {
width: 60px;
height: 4px;
top: 0;
border-radius: 2px;
background: var(--color);
position: absolute;
&:before {
content: '';
width: 48px;
height: 4px;
border-radius: 2px;
background: inherit;
position: absolute;
top: -10px;
left: 6px;
}
}
.left {
right: 28px;
transform-origin: 58px 2px;
transform: rotateZ(90deg);
animation: left var(--duration) ease infinite;
}
.right {
left: 28px;
transform-origin: 2px 2px;
transform: rotateZ(-90deg);
animation: right var(--duration) ease infinite;
}
.middle {
width: 32px;
height: 12px;
border: 4px solid var(--color);
border-top: 0;
border-radius: 0 0 9px 9px;
transform: translateY(2px);
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 50%;
top: 0;
li {
height: 4px;
border-radius: 2px;
transform-origin: 100% 2px;
width: 48px;
right: 0;
top: -10px;
position: absolute;
background: var(--color);
transform: rotateZ(0deg) translateX(-18px);
animation-duration: var(--duration);
animation-timing-function: ease;
animation-iteration-count: infinite;
$i: 0;
@while $i < 19 {
&:nth-child(#{$i}) {
animation-name: page-#{$i};
}
$i: $i + 1;
}
}
}
}
$i: 0;
@while $i < 19 {
$delay: $i * 1.86;
$delay-after: $i * 1.74;
@keyframes page-#{$i} {
#{4 + $delay}% {
transform: rotateZ(0deg) translateX(-18px);
}
#{13 + $delay-after}%,
#{54 + $delay}% {
transform: rotateZ(180deg) translateX(-18px);
}
#{63 + $delay-after}% {
transform: rotateZ(0deg) translateX(-18px);
}
}
$i: $i + 1;
}
@keyframes left {
4% {
transform: rotateZ(90deg);
}
10%,
40% {
transform: rotateZ(0deg);
}
46%,
54% {
transform: rotateZ(90deg);
}
60%,
90% {
transform: rotateZ(0deg);
}
96% {
transform: rotateZ(90deg);
}
}
@keyframes right {
4% {
transform: rotateZ(-90deg);
}
10%,
40% {
transform: rotateZ(0deg);
}
46%,
54% {
transform: rotateZ(-90deg);
}
60%,
90% {
transform: rotateZ(0deg);
}
96% {
transform: rotateZ(-90deg);
}
}
@keyframes book {
4% {
transform: rotateZ(-90deg);
}
10%,
40% {
transform: rotateZ(0deg);
transform-origin: 2px 2px;
}
40.01%,
59.99% {
transform-origin: 30px 2px;
}
46%,
54% {
transform: rotateZ(90deg);
}
60%,
90% {
transform: rotateZ(0deg);
transform-origin: 2px 2px;
}
96% {
transform: rotateZ(-90deg);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #275EFE;
img {
display: block;
width: 76px;
}
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Pure CSS Book Loader | Book Loader Html Css - Codewithrandom

Pure CSS Book Loader | Book Loader Html Css - Codewithrandom

We have completed our CSS section,  Here is our updated output with CSSHope you like the Pure CSS Book Loader, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you ๐Ÿ™๐Ÿ’•

This post teaches us to create a Pure CSS Book Loader using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Aaron Iker

Check out more…..



Share on:

Leave a Comment