3
Build a loading with HTML, CSS, Javascript
source link: https://dev.to/mhadi2003/build-a-loading-with-html-css-javascript-1ohc
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Mahdi
Posted on Feb 2
Build a loading with HTML, CSS, Javascript
Hello friends,
In this article, I will teach you how to create a loading with HTML, CSS, JavaScript. And I hope you like this article.
View live Codepen: https://codepen.io/mhadi-2003/pen/jOaqKjz
<div class="container">
<div class="loading-container">
<div class="loading"></div>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quibusdam nostrum, repellendus enim eveniet deleniti eaque
animi suscipit, nihil, fugiat ducimus tenetur quas quam.
Tempore magnam corrupti earum consequatur, modi unde?</p>
</div>
Enter fullscreen mode
Exit fullscreen mode
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Segoe UI", sans-serif;
line-height: 1.5;
}
/* Container */
.container {
margin: 50px auto;
width: 95%;
}
@media (min-width: 700px) {
.container {
width: 60%;
}
}
/* Loading */
.loading-container {
background-color: #ffffff;
position: fixed;
z-index: 1000;
height: 100%;
width: 100%;
bottom: 0;
right: 0;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
transition: ease all 4s;
}
.loaded {
visibility: hidden;
opacity: 0;
}
.loading {
border: 2px solid blue;
border-radius: 50%;
border-bottom: none;
border-left: none;
height: 50px;
width: 50px;
animation-name: loader;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* P */
p {
margin-bottom: 12px;
}
Enter fullscreen mode
Exit fullscreen mode
JavaScript
window.addEventListener("load" , function(){
document.querySelector(".loading-container").classList.add("loaded");
})
Enter fullscreen mode
Exit fullscreen mode
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK