Skip to main content

How to create Zooming effect preloading screen using HTML and CSS3

Creating Preloader screen with CSS is pretty easy due to added animation to them. CSS also unlock lots of designing opportunity by providing lot of psuedo-elements like :before, :after etc.

Featured photo


Steps required to create css preloader

  • A web page (Hypertext Markup Language page)
  • Cascading Style Sheet (CSS)
  • Additionally, JavaScript can be used for hiding the preloading screen after page completes its loading.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Circle loading</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="overlay">

    <div class="loading"></div>

</div>
</body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
    font-family: Arial;
}

.overlay{
    background: #ffffff;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 10px solid #764237;
  border-radius: 50%;
  animation: zoom 1s linear infinite alternate-reverse;
}

@keyframes zoom {
  0% {
    width: 50px;
    height: 50px;
    border-color: rgba(118, 66, 55, 1);
  }

  25% {
    width: 70px;
    height: 70px;
    border-color: rgba(118, 66, 55, 0.8);
  }

  50% {
    width: 90px;
    height: 90px;
    border-color: rgba(118, 66, 55, 0.6);
  }

  75% {
    width: 110px;
    height: 110px;
    border-color: rgba(118, 66, 55, 0.5);
  }

  100% {
    width: 130px;
    height: 130px;
    border-color: rgba(118, 66, 55, 0.4);
  }
}

JavaScript

window.onload = function(){
    document.getElementsByClassName("overlay")[0].style.display = "none";
/* [0] <= coz. we are considering overlay class for loader is at index 0 or first position */
};



Demo and code

Comments

Popular posts from this blog

How to create Simple CSS Preloading screen using HTML and CSS3

Creating Preloader screen with CSS is pretty easy due to added animation to them. CSS also unlock lots of designing opportunity by providing lot of psuedo-elements like :before, :after etc. Steps required to create css preloader A web page ( H ypertext  M arkup  L anguage page) C ascading  S tyle  S heet (CSS) Additionally, JavaScript can be used for hiding the preloading screen after page completes its loading. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Circle loading</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="overlay"> <div class="brand">Simplr Loading</div> <div class="loading"></div> <div class="text">Loading...</div> </div> </body> </html> C

How to create Ben 10 Style Preloading screen using HTML and CSS3

Creating Preloader screen with CSS is pretty easy due to added animation to them. CSS also unlock lots of designing opportunity by providing lot of psuedo-elements like :before, :after etc. Steps required to create css preloader A web page ( H ypertext  M arkup  L anguage page) C ascading  S tyle  S heet (CSS) Additionally, JavaScript can be used for hiding the preloading screen after page completes its loading. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Circle loading</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="overlay"> <div class="loader"></div> </div> </body> </html> CSS *{ padding: 0; margin: 0; } .overlay{ background: #425632; width:100%; height: 100vh; position: fixed; animation: b