<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-md-6 col-md-offset-4"> <div class="bat"> <span class="battery fa-5x"></span> </div> </div> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); .bat{ width: 200px; height: 100px; background: #000; color: #fff; text-align: center; margin-top: 100px; } .battery{ padding: 25px; } .battery::before{ content: "\f244"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; animation-name: chargebat; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes chargebat { 0%{ content: "\f244"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;} 25%{ content: "\f243"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;} 50%{ content: "\f242"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;} 75%{ content: "\f241"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;} 100%{ content: "\f240"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;} }