Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.
Project Structure
The project consists of 2 main files
- index.html - the HTML structure.
- style.css - for styling.
HTML Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
<div class="frame">
<div class="center">
<div class="circle big">
<div class="circle middle">
<div class="circle small"></div>
</div>
</div>
</div>
</div>CSS Styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
display:grid;
place-items:center;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background-color: #E56262;
color: #333;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.circle {
background-color: #FFF;
border-radius:50%;
box-shadow: 5px 10px 20px #0006;
display:grid;
place-items:center;
}
.big {
width:100px;
height: 100px;
animation: big-zoom 2.5s alternate infinite;
}
.middle {
width:60px;
height: 60px;
animation: middle-zoom 2.5s alternate infinite;
}
.small {
width:30px;
height: 30px;
animation: small-zoom 2.5s alternate infinite;
}
@keyframes small-zoom {
0%,
70% {
transform: scale(0)
}
100% {
transform: scale(1)
}
}
@keyframes middle-zoom {
0%,
40% {
transform: scale(0)
}
100% {
transform: scale(1)
}
}
@keyframes big-zoom {
0%,
10% {
transform: scale(0)
}
100% {
transform: scale(1)
}
}