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

by yoowordpress

HTML

<svg version="1.1" id="mixer" 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 class="mixer-body">
		<path style="fill:#F3B41B;" d="M0,358.265v15.257c0,4.41,3.573,7.983,7.983,7.983h496.033c4.41,0,7.983-3.573,7.983-7.983v-15.257H0  z" data-original="#F3B41B" class=""/>
		<path style="fill:#808080;" d="M392.249,156.907h-54.287c-4.41,0-7.983,3.573-7.983,7.983v93.672c0,4.41,3.573,7.983,7.983,7.983  h76.64c4.41,0,7.983-3.573,7.983-7.983v-71.318C422.586,170.516,408.977,156.907,392.249,156.907z" data-original="#808080" class=""/>
		<path style="fill:#F3B41B;" d="M363.509,289.963h-25.547c-4.41,0-7.983-3.573-7.983-7.983c0-4.41,3.573-7.983,7.983-7.983h25.547  c4.41,0,7.983,3.573,7.983,7.983C371.493,286.39,367.919,289.963,363.509,289.963z" data-original="#F3B41B" class=""/>
			<path style="fill:#EB6836;" d="M264.685,113.019L182.587,294.22c0.644,0,1.29-0.078,1.923-0.235l70.676-17.539   c2.391-0.594,4.374-2.258,5.373-4.509l39.735-89.506c1.027-2.312,0.897-4.973-0.35-7.174L264.685,113.019z" data-original="#EB6836" class=""/>
			<path style="fill:#EB6836;" d="M48.234,62.381c-3.304-0.18-6.361,1.714-7.7,4.734L0.799,156.621   c-1.321,2.975-0.704,6.454,1.56,8.792l83.041,85.779c0.713,0.736,1.56,1.327,2.497,1.744L169.527,69.06   c-0.895-0.398-1.856-0.627-2.835-0.677L48.234,62.381z" data-original="#EB6836" class=""/>
			<path style="fill:#C74B38;" d="M218.171,215.684l-35.582,78.537c0.644,0,1.29-0.078,1.923-0.235l70.676-17.539   c2.391-0.594,4.374-2.258,5.373-4.509l13.415-30.218L218.171,215.684z" data-original="#C74B38"/>
			<path style="fill:#C74B38;" d="M16.375,121.536L0.799,156.621c-1.321,2.975-0.704,6.454,1.56,8.792l83.041,85.779   c0.713,0.736,1.56,1.327,2.497,1.744l36.052-81.21L16.375,121.536z" data-original="#C74B38"/>
		<path style="fill:#F2F2F2;" d="M265.189,114.086c-0.761-1.976-2.276-3.569-4.211-4.427l-91.452-40.599 ...

CSS

#mixer {
  width: 320px;
  height: 320px;
}

#mixer .mixer-body {
  animation: driving 300ms infinite alternate;
}

@keyframes driving {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}