Loader by xopc333

1.loader {
2  width: 500px;
3  height: 250px;
4}
5
6.circle {
7  fill: #F25A33;
8}
9
10.circle-one {
11  opacity: 0;
12}
13
14.svg-stroke {
15  fill: transparent;
16  stroke-dasharray: 46.82, 93.64;
17  stroke-dashoffset: 46.82;
18  stroke: #F25A33;
19  opacity: 1;
20}
21
22.svg-wrap .svg-stroke {
23  animation: stroke-start 1.6s linear, stroke-end 1.6s 0.8s linear infinite;
24}
25
26.svg-wrap .circle-one {
27  animation: dot-one 0s 0.8s, move-dot 1.6s 0.8s linear infinite;
28}
29
30.svg-wrap .circle-two,
31.svg-wrap .circle-three {
32  animation: move-dot 1.6s 0.8s linear infinite;
33}
34
35@keyframes dot-one {
36  from {
37    opacity: 0;
38  }
39
40  to {
41    opacity: 1;
42  }
43}
44
45@keyframes stroke-start {
46  50% {
47    stroke-dashoffset: 46.82;
48  }
49
50  100% {
51    stroke-dashoffset: 0;
52  }
53}
54
55@keyframes stroke-end {
56  50% {
57    stroke-dasharray: 46.82, 93.64;
58    stroke-dashoffset: 0;
59    transform: translateX(0);
60  }
61
62  100% {
63    stroke-dasharray: 0, 93.64;
64    stroke-dashoffset: -46.82;
65    transform: translateX(10px);
66  }
67}
68
69@keyframes move-dot {
70  50% {
71    transform: translateX(0);
72  }
73
74  100% {
75    transform: translateX(10px);
76  }
77}