Wifeo Creative Code

<<< back to homepage for others creatives tricks

PURE CSS RELOAD MATERIAL DESIGN

Welcome

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="FazvC" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/FazvC'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/36-pure-css-reload-material-design.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.card
{
  width:90%;
  height:300px;
  background-color:#ffffff;
  margin:10px;
  padding: 20px;
  color:#666666;
  font-weight: 300;
  font-size: 36px;
  text-align: left;
  font-family: 'Roboto';
  box-shadow:0 0 2px #999999;
}
.circle
{
  width: 70px;
  height: 70px;
  background-color:#b11a44;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  right: 20px;
  box-shadow: 1px 1px 8px #333333;
}
.top
{
  position: absolute;
  width: 100%;
  background-color:#b11a44;
  height: 60px;
  top:0px;
  -webkit-animation-duration: 2s;
  -webkit-animation-name: spin;
  -moz-animation-duration: 2s;
  -moz-animation-name: spin;
  -ms-animation-duration: 2s;
  -ms-animation-name: spin;
  animation-duration: 2s;
  animation-name: spin;
}
.loading
{
  -webkit-animation-delay: 0.3s;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: load;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
  -moz-animation-delay: 0.3s;
  -moz-animation-duration: 0.8s;
  -moz-animation-name: load;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: 2;
  -ms-animation-delay: 0.3s;
  -ms-animation-duration: 0.8s;
  -ms-animation-name: load;
  -ms-animation-timing-function: linear;
  -ms-animation-iteration-count: 2;
  animation-delay: 0.3s;
  animation-duration: 0.8s;
  animation-name: load;
  animation-timing-function: linear;
  animation-iteration-count: 2;
}
.myfadeout
{
  -webkit-animation-delay: 1.6s;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: disparition;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 1.6s;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: disparition;
  -moz-animation-timing-function: linear;
  -moz-animation-fill-mode: both;
  -ms-animation-delay: 1.6s;
  -ms-animation-duration: 0.5s;
  -ms-animation-name: disparition;
  -ms-animation-timing-function: linear;
  -ms-animation-fill-mode: both;
  animation-delay: 1.6s;
  animation-duration: 0.5s;
  animation-name: disparition;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.myfadein
{
  position:absolute;
  bottom:0px;
  width:100%;
  font-size:28px;
  font-family: 'Roboto';
  color:#ffffff; 
  font-weight:300;
  -webkit-animation-delay: 2.1s;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: apparition;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -moz-animation-delay: 2.1s;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: apparition;
  -moz-animation-timing-function: linear;
  -moz-animation-fill-mode: both;
  -ms-animation-delay: 2.1s;
  -ms-animation-duration: 0.5s;
  -ms-animation-name: apparition;
  -ms-animation-timing-function: linear;
  -ms-animation-fill-mode: both;
  animation-delay: 2.1s;
  animation-duration: 0.5s;
  animation-name: apparition;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@-webkit-keyframes spin {
  0%,100% {height:60px;}
  20% {height:370px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;}
  35%,65% {height:53px;}50% {height:70px;} 80% {height:63px;}   
}
@-webkit-keyframes load {
  0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}   
}
@-webkit-keyframes disparition {
  0% {opacity: 1;}100% {opacity: 0;}   
}
@-webkit-keyframes apparition {
  0% {opacity: 0;}100% {opacity: 1;}   
}
@-moz-keyframes spin {
  0%,100% {height:60px;}
  20% {height:370px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;}
  35%,65% {height:53px;}50% {height:70px;} 80% {height:63px;}   
}
@-moz-keyframes load {
  0% {-moz-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);}   
}
@-moz-keyframes disparition {
  0% {opacity: 1;}100% {opacity: 0;}   
}
@-moz-keyframes apparition {
  0% {opacity: 0;}100% {opacity: 1;}   
}
@-ms-keyframes spin {
  0%,100% {height:60px;}
  20% {height:370px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;}
  35%,65% {height:53px;}50% {height:70px;} 80% {height:63px;}   
}
@-ms-keyframes load {
  0% {-ms-transform: rotate(0deg);}100% {-ms-transform: rotate(360deg);}   
}
@-ms-keyframes disparition {
  0% {opacity: 1;}100% {opacity: 0;}   
}
@-ms-keyframes apparition {
  0% {opacity: 0;}100% {opacity: 1;}   
}
@keyframes spin {
  0%,100% {height:60px;}
  20% {height:370px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;}
  35%,65% {height:53px;}50% {height:70px;} 80% {height:63px;}   
}
@keyframes load {
  0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}   
}
@keyframes disparition {
  0% {opacity: 1;}100% {opacity: 0;}   
}
@keyframes apparition {
  0% {opacity: 0;}100% {opacity: 1;}   
}

HTML CODE :

<div align="center" style="position:relative;">
  <div class="top">
    <div style="position:absolute; bottom:0px; width:100%;" class="myfadeout">
      <img src="http:YOUR-URL-IMAGE.png" align="center" class="loading">
    </div>
    <div class="myfadein">Welcome</div>
  </div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="circle"></div>
</div>