Animated Line

The animated line tutorial is create using HTML and CSS. developer can use animated line to enhance their application or web UI to make it look more attractive. It is recommended to use web-kit web browser such as Chrome or Firefox. The HTML code should contain below codes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animated Line</title>
    <link href="/style.css" rel="stylesheet">
  </head>
  <body>
	<br><br>
		<div id="garis"></div>
  </body>
</html>


The style.css contain the CSS for animated line. Below is the code for the CSS:

#garis {
  height:5px;
	background-color:#d13636;
	background-color:rgba(221,60,77,.95);
	background-image:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0,#e75239),color-stop(12.5%,#e75239),color-stop(12.5%,#ff961c),color-stop(25%,#ff961c),color-stop(25%,#ffcc27),color-stop(37.5%,#ffcc27),color-stop(37.5%,#fce62f),color-stop(50%,#fce62f),color-stop(50%,#cde35b),color-stop(62.5%,#cde35b),color-stop(62.5%,#82cc33),color-stop(75%,#82cc33),color-stop(75%,#41bece),color-stop(87.5%,#41bece),color-stop(87.5%,#049cdb),color-stop(100%,#049cdb));
	background-image:-webkit-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
	background-image:-moz-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
	background-image:-o-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
	background-image:-ms-linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
	background-image:linear-gradient(left,#e75239 0,#e75239 12.5%,#ff961c 12.5%,#ff961c 25%,#ffcc27 25%,#ffcc27 37.5%,#fce62f 37.5%,#fce62f 50%,#cde35b 50%,#cde35b 62.5%,#82cc33 62.5%,#82cc33 75%,#41bece 75%,#41bece 87.5%,#049cdb 87.5%,#049cdb 100%);
	background-position:0 0;
	background-size:1000px;
	width:100%;
	top:0;
	left:0;
	position:relative;
	-webkit-animation: garis 10s linear infinite;
	-moz-animation: garis 10s linear infinite;
	-ms-animation: garis 10s linear infinite;
	-o-animation: garis 10s linear infinite;
	animation: garis 10s linear infinite;
}      

#garis:after {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 5px;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
}

@-moz-keyframes garis {
0% {
    background-position: 0 bottom;
}
100% {
    background-position: 1600px bottom;
}
}

@-webkit-keyframes garis {
0% {
    background-position: 0 bottom;
}
100% {
    background-position: 1600px bottom;
}
}


Download the tutorial file here.

Tags: , , ,