Skip to main content

Posts

Showing posts from July, 2019

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 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 MultiCircle 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 <div class="overlay"> <div class="spinner"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> CSS body{ margin: 0; padding: 0; } .overlay{ width: 100%; height: 100vh; background-color: #fff; animation: bgchange 2s infinite ease-in-out; } .spinner span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100px; width: 100px; border: 2px solid #555; border-top:
Post a Comment
Read more