Прелоадер Yandex доставка

by yoowordpress

HTML

<svg version="1.1" id="mini-van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g id="cloud" opacity="1">
	<path class="cloud-2" fill="#3f99ee" d="M-46,57.1C-46,57.1-46,57.1-46,57.1c0-3.8-3.9-6.9-8.6-6.9c0,0,0,0,0,0c0-0.1,0-0.1,0-0.2
		c0-4.4-5.3-8-11.8-8c-5.5,0-10.2,2.6-11.4,6c-2.6-1-5.7-1.6-9-1.6c-8.1,0-14.9,3.5-17.1,8.2c-1.3-0.4-2.7-0.6-4.2-0.6
		c-7,0-12.7,4.4-12.7,9.9c0,4.9,4.6,9,10.6,9.7c-0.4,1-0.6,2-0.6,3c0,6.2,6.8,11.1,15.3,11.1c5.2,0,9.8-1.9,12.6-4.8
		c3.1,2.9,9,4.8,15.9,4.8c7.3,0,13.6-2.2,16.5-5.5c0.7,0.1,1.4,0.1,2.2,0.1c8.5,0,15.4-5.8,15.4-12.9C-33,63.4-38.6,58.1-46,57.1z"
		/>
	<path class="cloud-1" fill="#3f99ee" d="M-116.6,29.1C-116.6,29.1-116.6,29.1-116.6,29.1c0-2.8-3-5-6.7-5c-0.5,0-0.9,0-1.4,0.1
		c-1.6-2.3-5.5-3.9-10.1-3.9c-5.9,0-10.7,2.7-10.9,6c-4.3,1.2-7.3,3.8-7.3,6.7c0,4.1,5.7,7.4,12.8,7.4c1.3,0,2.5-0.1,3.6-0.3
		c1.8,1.2,4.5,1.9,7.5,1.9c5.2,0,9.5-2.2,9.8-5.1c0.6,0.2,1.2,0.3,1.8,0.3c2.9,0,5.2-1.9,5.2-4.1C-112.2,31.1-114.1,29.4-116.6,29.1
		z"/>
</g>
<g class="car-body">
	<g id="XMLID_1_">
		<g>
			<path fill="#F0C500" d="M249.8,143v30.4c0,5.7-4.6,10.3-10.3,10.3h-6.3c0-2.2-0.3-4.4-1-6.4c-2.8-9.1-11.2-15.7-21.2-15.7
				c-10,0-18.4,6.6-21.2,15.7c-0.6,2-1,4.2-1,6.4h-71.4c0-2.2-0.3-4.4-1-6.4c-2.8-9.1-11.2-15.7-21.2-15.7s-18.4,6.6-21.2,15.7
				c-0.6,2-1,4.2-1,6.4h-6.8c-5.7,0-10.3-4.6-10.3-10.3v-6.9v-15.6V143H249.8z"/>
			<path fill="#FFFFFF" d="M249.8,133.7v9.3H56v-9.3l13.7-29c0,0,3.3-5.6,10.1-5.6c3.9,0,141.7,0,150.6,0c9,0,11.5,5.7,11.5,5.7
				L249.8,133.7z M240,128.5l-3.9-14.8c0,0-1.8-5.2-7.7-5.2H212c-2.8,0-5.2,2.3-5.2,5.2v14.8c0,2.8,2.3,5.2,5.2,5.2h22.9
				C237.7,133.7,240,131.4,240,128.5z M197.6,128.5v-14.8c0-2.8-2.3-5.2-5.2-5.2h-21.6c-2.8,0-5.2,2.3-5.2,5.2v14.8
				c0,2.8,2.3,5.2,5.2,5.2h21.6C195.3,133.7,197.6,131.4,197.6,128.5z...

CSS

svg {
  display: block;
  float: left;
  margin-right: 10px;
  margin-top: 10px;
}

/********** Minivan *********/
#mini-van {
  width: 320px;
  height: 320px;
  background-color: #f4f4f4;
}

#mini-van .car-body {
  animation: driving 600ms infinite alternate;
}

.wheel {
  transform-origin: 50% 50%;
  position: absolute;
}

#mini-van .wheel {
  animation: wheelTurning 300ms infinite linear;
}

#mini-van .cloud-2 {
  animation: cloudTranslation 1000ms infinite linear;
}

#mini-van .cloud-1 {
  animation: cloudTranslation 1200ms infinite linear;
}

@keyframes driving {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}
@keyframes wheelTurning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes cloudTranslation {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(420px);
  }
}