Rotate circle with arrows

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/2.2.0/draggabilly.pkgd.min.js"></script>

    <div class="process_diagram_rotating_circle">
        <div class="process_diagram_rotating_circle_arrow process_diagram_rotating_circle_arrow--1"></div>
        <div class="process_diagram_rotating_circle_arrow process_diagram_rotating_circle_arrow--2"></div>
        <div class="process_diagram_rotating_circle_arrow process_diagram_rotating_circle_arrow--3"></div>
    </div>

CSS

body {
    padding: 50px;
}


.process_diagram_rotating_circle {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid #444;
    xborder-left-color: black;
    border-radius: 50%;
    animation: process_diagram_rotating_circleAnim 19s linear infinite;
}

.process_diagram_rotating_circle_arrow,
.process_diagram_rotating_circle_arrow:after {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background-color: #000;
}

.process_diagram_rotating_circle_arrow {
    position: absolute;
        transform-origin: bottom left;
}

.process_diagram_rotating_circle_arrow:after {
    content: "";
    transform: rotateZ(90deg);
    transform-origin: top left;
}

.process_diagram_rotating_circle_arrow--1 {
    bottom: 50%;
    left: 0;
    transform: rotateZ(45deg);
}


.process_diagram_rotating_circle_arrow--2 {
    bottom: 93%;
    left: 75%;
    transform: rotateZ(166deg);
}

.process_diagram_rotating_circle_arrow--3 {
    bottom: 6.6985%;
    left: 75%;
    transform: rotateZ(-73deg);
}

@keyframes process_diagram_rotating_circleAnim {
  100% {
    transform: rotateZ(360deg);
  }
}

JavaScript

var $draggable = $('.arrow').draggabilly({
    // options...
})