Skip to main content

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.

ben 10 preloader

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="loader"></div>

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

CSS

*{
 padding: 0;
 margin: 0;
}

.overlay{
 background: #425632;
 width:100%;
 height: 100vh;
 position: fixed;
 animation: bgRotate 2s infinite ease-in-out;
}

.loader{
 border: 60px solid #000000;
 position:absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-radius: 50%;
 animation: rotateAndSpilt 2s infinite ease-in-out;
}

@keyframes rotateAndSpilt{
 0%{
  transform: translate(-50%, -50%) rotate(0deg);
  width: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #000000;
  border-right: 60px solid #000000;
 }
 
 50%{
  transform: translate(-50%, -50%) rotate(180deg);
  width: 0;
  border-top: 60px solid #ffffff;
  border-bottom: 60px solid #ffffff;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
 }
 
 100%{
  transform: translate(-50%, -50%) rotate(360deg);
  width: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #000000;
  border-right: 60px solid #000000;
 }
}

@keyframes bgRotate{
 0%{
  background: #ffffff;
 }
 
 50%{
  background: #000000;
 }
 
 100%{
  background: #ffffff;
 }
}

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

Labels:

Comments

Post a Comment

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
Post a Comment
Read more

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. 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="loading"></div> </div> </body> </html> CSS body{ margin: 0; padding: 0; font-family: Arial; } .overlay{ background: #ffffff; height: 100vh; width: 100%; top: 0;
Post a Comment
Read more