</> Code The Pixel

Animated Line

Asyraf Wahi Anuar - October 06, 2018

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)

Popular
CakePHP 4 Print PDF Using CakePDF
May, 17 2020
CakePHP 4 Authentication Using Auth...
May, 14 2020
CakePHP 4 Sending Email
February, 01 2022
CakePHP 4 jQuery Date Time Picker
October, 01 2018
CakePHP 4 Export To CSV
May, 29 2020
CakePHP 4 Authentication Using...
May, 11 2020
CakePHP 4 Find, Sort & Count
June, 02 2020
Share
Sharing Link
Click the icon to share