SOURCE

<!DOCTYPE html>
<html>
    <head>
        <style>
            .l{
                stroke-width:20;
                fill:none;
                stroke-dasharray:252;
                stroke-dashoffset:0;
                animation: load 1.5s ease-in-out infinite;
                transform-origin:center;
                
            }
            .b1{
                stroke:#a456;
            }
            .b2{
                stroke:#b456;
                animation-delay:0.1s;
            }
            .b3{
                stroke:#c456;
                animation-delay:0.2s;
            }
             .point{
                animation:jump 1.5s ease-in-out infinite;}
            .point1{
                fill:red;}
             .point2{
                fill:yellow;
                animation-delay:0.2s;}
             .point3{
                fill:skyblue;
                animation-delay:0.4s;}
            @keyframes load{
                0%,100%{
                    stroke-dashoffset:252;
                }
                50%{
                    stroke-dashoffset:230;
                }
                100%{
                    transform:rotate(360deg);
                }
            }
           @keyframes jump{
                0%,100%{
                   transform:translateY(0);}
                50%{
                      transform:translateY(-10px); }   }
            </style>

    </head>
    <body>
        <svg   viewBox="0 0 120 120">
            <circle cx="45" cy="60" r="5" class="point point1" />
            <circle cx="60" cy="60" r="5" class="point point2" />
            <circle cx="75" cy="60" r="5" class="point point3" />
            <circle cx="60" cy="60" r="40" class="l b1"/>
            <circle cx="60" cy="60" r="40" class="l b2"/>
            <circle cx="60" cy="60" r="40" class="l b3"/>
            </svg>
    </body>
    </html>