Skip to main content

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 (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="brand">Simplr Loading</div>
    <div class="loading"></div>
    <div class="text">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;
}

.brand{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 2rem;
}

.text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* to make text to come to center */
    font-weight: bold;
}

.loading{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 200px; /* size changes depend on you */
    height: 200px; /* size changes depend on you */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: rotate 1s ease-in-out infinite;
    -o-animation: rotate 1s ease-in-out infinite;
    animation: rotate 1s ease-in-out infinite;
}

@keyframes rotate {
    0%{
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100%{
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

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 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
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