progress-circular()
	.bunt-progress-circular
		display: inline-block
		position: relative
		width: 48px
		height: 48px

		&.tiny
			width: 14px
			height: 14px
			circle
				stroke-width: 8

		&.small
			width: 24px
			height: 24px
			circle
				stroke-width: 7

		&.big
			width: 64px
			height: 64px
			circle
				stroke-width: 4

		&.huge
			width: 128px
			height: 128px
			circle
				stroke-width: 3

		&.progress-center
			display: block
			margin: auto

		&.progress-page
			display: block
			margin: 7rem auto //flex that better
		svg
			animation: bunt-progress-circular-rotate 1568ms linear infinite
			position: relative
			height: 100%
			width: 100%

			circle
				fill: none
				stroke: $spinner-default-color
				stroke-width: 5px
				stroke-miterlimit: 10
				stroke-dasharray: 1,200
				stroke-dashoffset: 0
				stroke-linecap: square
				animation: bunt-progress-circular-dash 1333ms ease-in-out infinite

	@keyframes bunt-progress-circular-rotate
		100%
			transform: rotate(360deg)

	@keyframes bunt-progress-circular-dash
		0%
			stroke-dasharray: 1,200
			stroke-dashoffset: 0
		50%
			stroke-dasharray: 89, 200
			stroke-dashoffset: -35
		100%
			stroke-dasharray: 89, 200
			stroke-dashoffset: -124