LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  
    
      
    
    
    LOADING
    
    
      
    
  
 
	  
  
  
  
CSS
body {
  background: #141414;
  text-align: center;
}
.loading {
  margin-top: 20px;
}
.water-fill {
  -webkit-animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate;
          animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate;
}
@-webkit-keyframes wave {
  0% {
    x: -400px;
  }
  100% {
    x: 0;
  }
}
@keyframes wave {
  0% {
    x: -400px;
  }
  100% {
    x: 0;
  }
}
@-webkit-keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}
@keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

Revisiting my old CSS Text Filling with Water pen for an article, this time made with SVG, for hopefully better support.
Term
Tue, 11/28/2017 - 02:10

Related Codes

Pen ID
Pen ID
Pen ID