<div class="loading-window">
    <div class="car">
        <div class="strike"></div>
        <div class="strike strike2"></div>
        <div class="strike strike3"></div>
        <div class="strike strike4"></div>
        <div class="strike strike5"></div>
        <div class="car-detail spoiler"></div>
        <div class="car-detail back"></div>
        <div class="car-detail center"></div>
        <div class="car-detail center1"></div>
        <div class="car-detail front"></div>
        <div class="car-detail wheel"></div>
        <div class="car-detail wheel wheel2"></div>
    </div>

    <div class="text">
        <span>Loading</span><span class = "dots">...</span>
    </div>
</div>
$border-color: #ffe4e1
$background-color: #333
$border-radius-big: 6px
$font-size-header: 16px

$car-color: $border-color
$spin-deg: 36deg

@keyframes spin
	0%
		transform: translate(2px, 1px) rotate($spin-deg * 0)
	10%
		transform: translate(-1px, -3px) rotate($spin-deg * 1)
	20%
		transform: translate(-2px, 0px) rotate($spin-deg * 2)
	30%
		transform: translate(1px, 2px) rotate($spin-deg * 3)
	40%
		transform: translate(1px, -1px) rotate($spin-deg * 4)
	50%
		transform: translate(-1px, 3px) rotate($spin-deg * 5)
	60%
		transform: translate(-1px, 1px) rotate($spin-deg * 6)
	70%
		transform: translate(3px, 1px) rotate($spin-deg * 7)
	80%
		transform: translate(-2px, -1px) rotate($spin-deg * 8)
	90%
		transform: translate(2px, 1px) rotate($spin-deg * 9)
	100%
		transform: translate(1px, -2px) rotate($spin-deg * 10)

@keyframes speed 
	0%
		transform: translate(2px, 1px) rotate(0deg)
	10%
		transform: translate(-1px, -3px) rotate(-1deg)
	20%
		transform: translate(-2px, 0px) rotate(1deg)
	30%
		transform: translate(1px, 2px) rotate(0deg)
	40%
		transform: translate(1px, -1px) rotate(1deg)
	50%
		transform: translate(-1px, 3px) rotate(-1deg)
	60%
		transform: translate(-1px, 1px) rotate(0deg)
	70%
		transform: translate(3px, 1px) rotate(-1deg)
	80%
		transform: translate(-2px, -1px) rotate(1deg)
	90%
		transform: translate(2px, 1px) rotate(0deg)
	100%
		transform: translate(1px, -2px) rotate(-1deg)


@keyframes strikes
	from
		left: 25px
	to
		left: -80px
		opacity: 0

@keyframes dots
	from
		width: 0px
	to
		width: 15px

@keyframes fadeIn
	from
		opacity: 0
	to
		opacity: 1

body
	background: $background-color
	font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif

.fadeIn
	animation: fadeIn .4s both

.loading-window
	@extend .fadeIn
	background: $background-color
	border-radius: $border-radius-big
	border: 3px solid $border-color
	color: $car-color
	height: 200px
	left: 50%
	margin-left: -150px
	margin-top: -100px
	position: fixed
	top: 50%
	width: 300px
	z-index: 99

	.text
		font-size: $font-size-header
		position: absolute
		width: auto
		top: 75%
		left: 38%
		margin: 0 auto
	.dots
		display: inline-block
		width: 5px
		overflow: hidden
		vertical-align: bottom
		animation: dots 1.5s linear infinite
		transition: 1

.car
	position: absolute
	width: 117px
	height: 42px
	left: 92px
	top: 70px

	.strike
		position: absolute
		width: 11px
		height: 1px
		background: $car-color
		animation: strikes .2s linear infinite

	.strike2
		top: 11px
		animation-delay: .05s

	.strike3
		top: 22px
		animation-delay: .1s

	.strike4
		top: 33px
		animation-delay: .15s

	.strike5
		top: 44px
		animation-delay: .2s

	&-detail
		position: absolute
		display: block
		background: $car-color
		animation: speed .5s linear infinite

		&.spoiler
			width: 0
			height: 0
			top: 7px
			background: none
			border: 20px solid transparent
			border-bottom: 8px solid $car-color
			border-left: 20px solid $car-color

		&.back
			height: 20px
			width: 92px
			top: 15px
			left: 0px

		&.center
			height: 35px
			width: 75px
			left: 12px
			border-top-left-radius: 30px
			border-top-right-radius: 45px 40px
			border: 4px solid $car-color
			background: none
			box-sizing: border-box

		&.center1
			height: 35px
			width: 35px
			left: 12px
			border-top-left-radius: 30px

		&.front
			height: 20px
			width: 50px
			top: 15px
			left: 67px
			border-top-right-radius: 50px 40px
			border-bottom-right-radius: 10px

		&.wheel
			height: 20px
			width: 20px
			border-radius: 50%
			top: 20px
			left: 12px
			border: 3px solid $background-color
			background: linear-gradient(45deg, transparent 45%, $border-color 46%, $border-color 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, $border-color 46%, $border-color 54%, transparent 55%), linear-gradient(90deg, transparent 45%, $border-color 46%, $border-color 54%, transparent 55%), linear-gradient(0deg, transparent 45%, $border-color 46%, $border-color 54%, transparent 55%), radial-gradient($border-color 29%, transparent 30%, transparent 50%, $border-color 51%),$background-color
			animation-name: spin

		&.wheel2
			left: 82px
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.