1 
 2<div class="loader">
 3  <svg id="cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 4    <defs>
 5      <filter id="roundness">
 6        <feGaussianBlur in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
 7        <feColorMatrix
 8          values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10"
 9        ></feColorMatrix>
10      </filter>
11      <mask id="shapes">
12        <g fill="white">
13          <polygon points="50 37.5 80 75 20 75 50 37.5"></polygon>
14          <circle cx="20" cy="60" r="15"></circle>
15          <circle cx="80" cy="60" r="15"></circle>
16          <g>
17            <circle cx="20" cy="60" r="15"></circle>
18            <circle cx="20" cy="60" r="15"></circle>
19            <circle cx="20" cy="60" r="15"></circle>
20          </g>
21        </g>
22      </mask>
23      <mask id="clipping" clipPathUnits="userSpaceOnUse">
24        <g id="lines" filter="url(#roundness)">
25          <g mask="url(#shapes)" stroke="white">
26            <line x1="-50" y1="-40" x2="150" y2="-40"></line>
27            <line x1="-50" y1="-31" x2="150" y2="-31"></line>
28            <line x1="-50" y1="-22" x2="150" y2="-22"></line>
29            <line x1="-50" y1="-13" x2="150" y2="-13"></line>
30            <line x1="-50" y1="-4" x2="150" y2="-4"></line>
31            <line x1="-50" y1="5" x2="150" y2="5"></line>
32            <line x1="-50" y1="14" x2="150" y2="14"></line>
33            <line x1="-50" y1="23" x2="150" y2="23"></line>
34            <line x1="-50" y1="32" x2="150" y2="32"></line>
35            <line x1="-50" y1="41" x2="150" y2="41"></line>
36            <line x1="-50" y1="50" x2="150" y2="50"></line>
37            <line x1="-50" y1="59" x2="150" y2="59"></line>
38            <line x1="-50" y1="68" x2="150" y2="68"></line>
39            <line x1="-50" y1="77" x2="150" y2="77"></line>
40            <line x1="-50" y1="86" x2="150" y2="86"></line>
41            <line x1="-50" y1="95" x2="150" y2="95"></line>
42            <line x1="-50" y1="104" x2="150" y2="104"></line>
43            <line x1="-50" y1="113" x2="150" y2="113"></line>
44            <line x1="-50" y1="122" x2="150" y2="122"></line>
45            <line x1="-50" y1="131" x2="150" y2="131"></line>
46            <line x1="-50" y1="140" x2="150" y2="140"></line>
47          </g>
48        </g>
49      </mask>
50    </defs>
51    <rect
52      x="0"
53      y="0"
54      width="100"
55      height="100"
56      rx="0"
57      ry="0"
58      mask="url(#clipping)"
59    ></rect>
60    <g>
61      <path
62        d="M33.52,68.12 C35.02,62.8 39.03,58.52 44.24,56.69 C49.26,54.93 54.68,55.61 59.04,58.4 C59.04,58.4 56.24,60.53 56.24,60.53 C55.45,61.13 55.68,62.37 56.63,62.64 C56.63,62.64 67.21,65.66 67.21,65.66 C67.98,65.88 68.75,65.3 68.74,64.5 C68.74,64.5 68.68,53.5 68.68,53.5 C68.67,52.51 67.54,51.95 66.75,52.55 C66.75,52.55 64.04,54.61 64.04,54.61 C57.88,49.79 49.73,48.4 42.25,51.03 C35.2,53.51 29.78,59.29 27.74,66.49 C27.29,68.08 28.22,69.74 29.81,70.19 C30.09,70.27 30.36,70.31 30.63,70.31 C31.94,70.31 33.14,69.44 33.52,68.12Z"
63      ></path>
64      <path
65        d="M69.95,74.85 C68.35,74.4 66.7,75.32 66.25,76.92 C64.74,82.24 60.73,86.51 55.52,88.35 C50.51,90.11 45.09,89.43 40.73,86.63 C40.73,86.63 43.53,84.51 43.53,84.51 C44.31,83.91 44.08,82.67 43.13,82.4 C43.13,82.4 32.55,79.38 32.55,79.38 C31.78,79.16 31.02,79.74 31.02,80.54 C31.02,80.54 31.09,91.54 31.09,91.54 C31.09,92.53 32.22,93.09 33.01,92.49 C33.01,92.49 35.72,90.43 35.72,90.43 C39.81,93.63 44.77,95.32 49.84,95.32 C52.41,95.32 55,94.89 57.51,94.01 C64.56,91.53 69.99,85.75 72.02,78.55 C72.47,76.95 71.54,75.3 69.95,74.85Z"
66      ></path>
67    </g>
68  </svg>
69</div>          

 1 
 2.loader {
 3  --cloud-color: #4387f4;
 4  --arrows-color: #80b1ff;
 5  --time-animation: 1s;
 6  transform: scale(1); /* You can change the size */
 7}
 8 
 9.loader #cloud {
10  width: 100px;
11  height: 100px;
12}
13 
14.loader #cloud rect {
15  fill: var(--cloud-color);
16}
17 
18.loader #cloud g:nth-child(3) {
19  transform-origin: 50% 72.8938%;
20  fill: var(--arrows-color);
21  filter: drop-shadow(0 0 8px black);
22  animation: rotation var(--time-animation) linear infinite;
23}
24 
25.loader #shapes g g circle {
26  animation: cloud calc(var(--time-animation) * 2) linear infinite;
27}
28 
29.loader #shapes g g circle:nth-child(2) {
30  animation-delay: calc((var(--time-animation) * 2) / -3);
31}
32 
33.loader #shapes g g circle:nth-child(3) {
34  animation-delay: calc((var(--time-animation) * 2) / -1.5);
35}
36 
37.loader svg #lines g line {
38  stroke-width: 5;
39  transform-origin: 50% 50%;
40  rotate: -65deg;
41  animation: lines calc(var(--time-animation) / 1.33) linear infinite;
42}
43 
44@keyframes rotation {
45  0% {
46    transform: rotate(0deg);
47  }
48  50% {
49    transform: rotate(180deg);
50  }
51  100% {
52    transform: rotate(360deg);
53  }
54}
55 
56@keyframes lines {
57  0% {
58    transform: translateY(-10px);
59  }
60  100% {
61    transform: translateY(8px);
62  }
63}
64 
65@keyframes cloud {
66  0% {
67    cx: 20;
68    cy: 60;
69    r: 15;
70  }
71  50% {
72    cx: 50;
73    cy: 45;
74    r: 20;
75  }
76  100% {
77    cx: 80;
78    cy: 60;
79    r: 15;
80  }
81}