Code The Pixel

Animated Line

Asyraf Wahi Anuar - October 06, 2018
Published in Misc 1653 Views Email This Article
Estimated reading time: 1 minute, 54 seconds

The animated line tutorial is created using HTML and CSS. developer can use animated lines to enhance their application or web UI to make it look more attractive. It is recommended to use a 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 contains the CSS for the animated lines. 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;
}
}


That all. Happy coding :)


Cite this article (APA 6th Edition)