<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <svg width="120px" height="60px"> <path class="infinity-path" stroke="#fff" d="M 30 10 a 20 20 0 1 0 0 40 c 20 0 40 -40 60 -40 a 20 20 0 0 1 0 40 c -20 0 -40 -40 -60 -40"></path> </svg>

body { background: yellowgreen; } svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); } path { fill: none; stroke: #333; stroke-width: 12; }

var infinity = document.querySelector('.infinity-path'); var infinityIcon = new Moveit(infinity, { start: '0%', end: '10%' }); function animate() { infinityIcon.set({ start: '20%', end: '101', duration: 1, follow: true, callback: function() { animate(); } }); } animate();