@keyframes loader-roller { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-webkit-keyframes loader-roller { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@-moz-keyframes loader-roller { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); } }

@-ms-keyframes loader-roller { 0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); } }

.loader-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.loader-roller div {
	animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-webkit-animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-moz-animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-ms-animation: loader-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
}

.loader-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin: -4px 0 0 -4px;
}

.loader-roller div:nth-child(1) {
	animation-delay: -0.036s;
	-webkit-animation-delay: -0.036s;
	-moz-animation-delay: -0.036s;
	-ms-animation-delay: -0.036s;
}

.loader-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}

.loader-roller div:nth-child(2) {
	animation-delay: -0.072s;
	-webkit-animation-delay: -0.072s;
	-moz-animation-delay: -0.072s;
	-ms-animation-delay: -0.072s;
}

.loader-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}

.loader-roller div:nth-child(3) {
	animation-delay: -0.108s;
	-webkit-animation-delay: -0.108s;
	-moz-animation-delay: -0.108s;
	-ms-animation-delay: -0.108s;
}

.loader-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
}

.loader-roller div:nth-child(4) {
	animation-delay: -0.144s;
	-webkit-animation-delay: -0.144s;
	-moz-animation-delay: -0.144s;
	-ms-animation-delay: -0.144s;
}

.loader-roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
}

.loader-roller div:nth-child(5) {
	animation-delay: -0.18s;
	-webkit-animation-delay: -0.18s;
	-moz-animation-delay: -0.18s;
	-ms-animation-delay: -0.18s;
}

.loader-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
}

.loader-roller div:nth-child(6) {
	animation-delay: -0.216s;
	-webkit-animation-delay: -0.216s;
	-moz-animation-delay: -0.216s;
	-ms-animation-delay: -0.216s;
}

.loader-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
}

.loader-roller div:nth-child(7) {
	animation-delay: -0.252s;
	-webkit-animation-delay: -0.252s;
	-moz-animation-delay: -0.252s;
	-ms-animation-delay: -0.252s;
}

.loader-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
}

.loader-roller div:nth-child(8) {
	animation-delay: -0.288s;
	-webkit-animation-delay: -0.288s;
	-moz-animation-delay: -0.288s;
	-ms-animation-delay: -0.288s;
}

.loader-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
}

@keyframes loader-roller-large { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-webkit-keyframes loader-roller-large { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@-moz-keyframes loader-roller-large { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); } }

@-ms-keyframes loader-roller-large { 0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); } }

.loader-roller-large {
	display: inline-block;
	position: relative;
	width: 120px;
	height: 120px;
}

.loader-roller-large div {
	animation: loader-roller-large 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-webkit-animation: loader-roller-large 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-moz-animation: loader-roller-large 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	-ms-animation: loader-roller-large 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 60px 60px;
}

.loader-roller-large div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 9.5px;
	height: 9.5px;
	border-radius: 80%;
	margin: -4px 0 0 -4px;
}

.loader-roller-large div:nth-child(1) {
	animation-delay: -0.036s;
	-webkit-animation-delay: -0.036s;
	-moz-animation-delay: -0.036s;
	-ms-animation-delay: -0.036s;
}

.loader-roller-large div:nth-child(1):after {
	top: 94.5px;
	left: 94.5px;
}

.loader-roller-large div:nth-child(2) {
	animation-delay: -0.072s;
	-webkit-animation-delay: -0.072s;
	-moz-animation-delay: -0.072s;
	-ms-animation-delay: -0.072s;
}

.loader-roller-large div:nth-child(2):after {
	top: 102px;
	left: 84px;
}

.loader-roller-large div:nth-child(3) {
	animation-delay: -0.108s;
	-webkit-animation-delay: -0.108s;
	-moz-animation-delay: -0.108s;
	-ms-animation-delay: -0.108s;
}

.loader-roller-large div:nth-child(3):after {
	top: 106.5px;
	left: 72px;
}

.loader-roller-large div:nth-child(4) {
	animation-delay: -0.144s;
	-webkit-animation-delay: -0.144s;
	-moz-animation-delay: -0.144s;
	-ms-animation-delay: -0.144s;
}

.loader-roller-large div:nth-child(4):after {
	top: 108px;
	left: 60px;
}

.loader-roller-large div:nth-child(5) {
	animation-delay: -0.18s;
	-webkit-animation-delay: -0.18s;
	-moz-animation-delay: -0.18s;
	-ms-animation-delay: -0.18s;
}

.loader-roller-large div:nth-child(5):after {
	top: 106.5px;
	left: 48px;
}

.loader-roller-large div:nth-child(6) {
	animation-delay: -0.216s;
	-webkit-animation-delay: -0.216s;
	-moz-animation-delay: -0.216s;
	-ms-animation-delay: -0.216s;
}

.loader-roller-large div:nth-child(6):after {
	top: 102px;
	left: 36px;
}

.loader-roller-large div:nth-child(7) {
	animation-delay: -0.252s;
	-webkit-animation-delay: -0.252s;
	-moz-animation-delay: -0.252s;
	-ms-animation-delay: -0.252s;
}

.loader-roller-large div:nth-child(7):after {
	top: 94.5px;
	left: 25.5px;
}

.loader-roller-large div:nth-child(8) {
	animation-delay: -0.288s;
	-webkit-animation-delay: -0.288s;
	-moz-animation-delay: -0.288s;
	-ms-animation-delay: -0.288s;
}

.loader-roller-large div:nth-child(8):after {
	top: 84px;
	left: 18px;
}


/* Color varations: PRIMARY, SECONDARY, LIGHT, DARK, SUCCESS, INFO, WARNING, DANGER */

.loader-roller-primary div:after {
	background: #2a4693;
}

.loader-roller-secondary div:after {
	background: #ec1f27;
}

.loader-roller-light div:after {
	background: #eeeeee;
}

.loader-roller-dark div:after {
	background: #777777;
}

.loader-roller-success div:after {
	background: #28a745;
}

.loader-roller-info div:after {
	background: #17a2b8;
}

.loader-roller-warning div:after {
	background: #ffc107;
}

.loader-roller-caution div:after {
	background: #17a2b8;
}

.loader-roller-danger div:after {
	background: #dc3545;
}