PD Logo Loader

by UDany

HTML

<div class="pd-logo-loader animate orange large center fixed" :class="[{center, fixed}, color, size, static ? 'static' : 'animate']">
  <div class="contents">
    <svg class="part hat" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 75" xml:space="preserve">
      <path id="capelo" d="M69.9,23.7c-0.2-1.1-0.9-2.1-1.9-2.5L36.4,6.5c-0.9-0.4-1.9-0.4-2.8,0L2,21.1c-1.7,0.8-2.4,2.7-1.7,4.4
                           c0.3,0.7,0.9,1.3,1.7,1.7l31.6,14.6c0.9,0.4,1.9,0.4,2.8,0l27-12.4v9.4c0,1.8,1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3l0,0V24.4
                           C70,24.2,70,23.9,69.9,23.7L69.9,23.7z M35,35.1L11.3,24.1L35,13.2l23.7,10.9L35,35.1L35,35.1z"/>
    </svg>

    <svg class="part circle bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 75" xml:space="preserve">
      <path d="M56.7,48.6c-1.6-0.8-3.7-0.2-4.5,1.4c-3.3,6.3-9.9,10.2-17.2,10.2S21.1,56.3,17.8,50c-0.9-1.6-2.9-2.3-4.5-1.4
               s-2.3,2.9-1.4,4.5l0,0c4.4,8.5,13.3,13.8,23.1,13.8s18.7-5.3,23.1-13.8C59,51.5,58.3,49.5,56.7,48.6C56.7,48.6,56.7,48.6,56.7,48.6
               L56.7,48.6z"/>
    </svg>
    <svg class="part circle left" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 75" xml:space="preserve">
      <path d="M27.1,62.3c0.8-1.6,0.2-3.7-1.4-4.5c-6.3-3.3-10.2-9.9-10.2-17.2s3.9-13.9,10.2-17.2c1.6-0.9,2.3-2.9,1.4-4.5
               c-0.9-1.6-2.9-2.3-4.5-1.4l0,0C14.1,21.9,8.8,30.8,8.8,40.6s5.3,18.7,13.8,23.1C24.2,64.5,26.2,63.9,27.1,62.3
               C27.1,62.3,27.1,62.3,27.1,62.3L27.1,62.3z"/>
    </svg>
    <svg class="part circle top" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 75" xml:space="preserve">
      <path...

SCSS

$orange: #FF7300;

$black: #2E2F32; // #404040
$black-2: #494B56; // #666
$black-3: #90939E; // #999
$black-4: #B9BBC3;
$black-5: #D1D2D3;
$black-6: #FAFAFA;

.pd-logo-loader {
	width: 70px;
	height: 70px;
	position: relative;
	transform-origin: 0 0;
	display: inline-block;
	overflow: hidden;

	.contents {
		transform-origin: 0 0;
	}

	&.small {
		width: 35px;
		height: 35px;
	}

	&.large {
		width: 120px;
		height: 120px;
	}

	&.center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);

		&.small {
			transform: translate(-50%,-50%);
		}
	}

	&.fixed, &.center.fixed {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}


	&.orange {
		background-color: inherit !important;
		fill:$orange;
	}
	&.black {
		background-color: inherit !important;
		fill:$black;
	}
	&.black-2 {
		fill:$black-2;
	}
	&.black-3 {
		fill:$black-3;
	}
	&.black-4 {
		fill:$black-4;
	}
	&.black-5 {
		fill:$black-5;
	}
	&.black-6 {
		fill:$black-6;
	}

	.part {
		position: absolute;
		left: 0;
		right: 0;
		opacity: 0;

		transform-origin: 50% 55.2%;

		animation-duration: 2.5s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}
}

/* CIRCLE */
.pd-logo-loader {
	.part.circle {
		opacity: 1;
	}

	&.animate {
		.part.circle {
			transform-origin: 50% 54%;

			&.left {
				animation-name: circle-left;
			}
			&.top {
				animation-name: circle-top;
			}
			&.right {
				animation-name: circle-right;
			}
			&.bottom {
				animation-name: circle-bottom;
			}
		}
	}

	&.static {
		.part.circle {
			&.left {
				opacity: 0;
			}
			&.top {
				opacity: 0;
			}
			&.right {
				opacity: 0;
			}
		}
	}
}


@mixin circle-rotate($final, $start, $scale:100, $offset:0) {
	#{($scale * 0) + $offset}% {
		transform: rotate($start);
	}

	#{($scale * .4) + $offset}% {
		transform: rotate($final);
	}

	#{($scale * .6) + $offset}% {
		transform: rotate($final);
	}

	#{($scale * 1) + $offset}% {
		transform:...