LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
 
 
 
Water
CSS
body{margin:0px; background-color:#e3b733;}

#tile01
{
   margin: auto;
   width:200px; height:100px; 
 }

#mask
{
  position:relative;
  top:5px;
  margin:auto;
  width:200px; height:100px; 
 
  font-size:60px;
  font-weight:700  ;
  font-family: 'Lobster Two', cursive;
  text-align:center;
  line-height:90px;
   text-shadow: 0px 2px 2px  rgba(0,0,0,0.2), 0px 2px 0px rgba(255,255,255,0.3);

 background-image:-webkit-radial-gradient(center 10px,80px 100px, #111111 50%, #0099ff 51%);
   
background-size:40px 110px;  
 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
-webkit-animation-name: wave-animation; 
-webkit-animation-duration: 13s ;  
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function: linear ; 
}

@-webkit-keyframes 'wave-animation'
{ 
 0% {background-position:200px 10px;}
 50% {background-position:100px -20px;}
100% {background-position:0px -40px;;}
}

#box{
margin: 100px auto;
width:200px; height:100px;
border-radius:20px;
border:5px solid #111111;
      background-image:-webkit-linear-gradient( 45deg , #e6af17 0%, #e3b733 100%);
opacity:0.95;
box-shadow:0px 2px 0px #ffe8a5;

}
JS
/*
var num=document.getElementById("mask");
var count=0;
var time=setInterval(function(){
count++;
  if (count==100){count=100; clearInterval(time);
                 }
num.innerHTML=count+"%";
 
},100);
*/
//wip - it's just really ugly right now  e3b733 ff4127

Description

wip- i wanted to make a loader mask with some water effect to it, without the use of canvas or svg's maybe later on i'll add tiny bubbles or something
Term
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv