.example .spinner, .example .quellcode{
	border:0px solid yellow !important;
}

td{
	padding:5px;
}

td.spinner, td.quellcode{
	width:50%;
}

.example.flex{
	display: flex;
    justify-content: left;
    align-items: flex-start;
}

.spinner{
	position:relative;
}

div.prob_wrapper{
	display:block;
	background-color:rgba(0,0,0,.1);
}

.spinning {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.spinning{
  display: inline-block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  transform: rotate(360deg);
  animation: spinn 4s infinite;
  animation-timing-function: linear;
}
@keyframes spinn {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(900deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*==================================================================*/
div.prob_wrapper_2{
	display:block;
	background-color:rgba(0,0,0,1);
}

.spinning_2{
  width:80px;
  height:80px;
  border-radius:50%;
}

.spinning_2 {
  border:30px solid red;
  border-left:30px solid green;
  border-radius:50%;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  background-color:transparent;
  width: 10px;
  height: 10px;
  animation: spinn_2 2.2s infinite;
}

@keyframes spinn_2 {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(-320deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*==================================================================*/
.prob_wrapper_3{
	display: flex;
	justify-content: center; /* Horizontal zentrieren */
	align-items: center;     /* Vertikal zentrieren */
	width:80px;
	height:80px;
	border-radius:50%;
	border:2px dotted yellow;
	border-top-color:transparent;
	animation: spinn_out 2s infinite;
}

.spinning_3{
	display:inline-block;
	width:5px;
	height:5px;
	border:30px solid green;
	border-top-color:transparent;
	border-bottom-color:transparent;
	border-radius:50%;
	animation: spinn_in 1s infinite;
}

@keyframes spinn_out {
  0% {
    transform: rotate(0);
	animation-timing-function: linear;
  }
  100% {
    transform: rotate(-360deg);
	animation-timing-function: linear;
  }
}

@keyframes spinn_in {
  0% {
    transform: rotate(0);
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*============================= Spinner 4 =====================================*/

.wrapper_4{
	width:250px;
	height:20px;
	margin:10px auto;
	border: 2px dotted rgb(255,255,0);
	border-radius:9px;
	text-align:left;
	background: linear-gradient(
		90deg, rgba(32, 167, 77, 0.2) 0%, 
		rgba(156, 15, 194,.3) 50%, 
		rgba(109,45,28,.4) 100%);
}

.load_4{
	position:relative;
	left:0%;
	display:inline-block;
	width:10px;
	height:10px;
	margin:0 3px 0 3px;
	border: 1px solid rgb(0,255,0);
	background-color:rgb(0,255,0);
	border-radius:50%;
	animation: go_load 2s infinite;
}

@keyframes go_load {
  0% {
    left: 0%;
	animation-timing-function: linear;
  }
  100% {
    left: 93%;
	animation-timing-function: linear;
  }
}

/*============================= Spinner 5 =====================================*/

.wrapper_5{
	width:250px;
	height:20px;
	margin:10px auto;
	border: 2px dotted rgb(255,255,0);
	border-radius:9px;
	text-align:left;
	background: linear-gradient(
		90deg, rgba(32, 167, 77, 0.2) 0%, 
		rgba(156, 15, 194,.3) 50%, 
		rgba(109,45,28,.4) 100%);
}

.load_5{
	display:inline-block;
	width:10px;
	height:10px;
	margin:0 3px 0 0;
	border: 1px solid rgb(0,255,0);
	background-color: rgb(0,255,0);
	border-radius:50%;
}


/*============================= Spinner 6 =====================================*/

.wrapper_6{
	width:250px;
	height:20px;
	margin:10px auto;
	border: 2px dotted rgb(255,255,0);
	border-radius:9px;
	text-align:left;
	background: linear-gradient(to right, rgba(32, 167, 77, .3) 0%, rgb(0, 0, 0) 0%);
	animation: bg_go_right 2s infinite;
}

@keyframes bg_go_right {
  0% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 0%, rgb(0, 0, 0) 0%);
	animation-timing-function: linear;
  }
  10% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 10%, rgb(0, 0, 0) 10%);
	animation-timing-function: linear;
  }
  20% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 20%, rgb(0, 0, 0) 20%);
	animation-timing-function: linear;
  }
  30% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 30%, rgb(0, 0, 0) 30%);
	animation-timing-function: linear;
  }
  40% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 40%, rgb(0, 0, 0) 40%);
	animation-timing-function: linear;
  }
  50% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 50%, rgb(0, 0, 0) 50%);
	animation-timing-function: linear;
  }
  60% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 60%, rgb(0, 0, 0) 60%);
	animation-timing-function: linear;
  }
  70% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 70%, rgb(0, 0, 0) 70%);
	animation-timing-function: linear;
  }
  80% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 80%, rgb(0, 0, 0) 80%);
	animation-timing-function: linear;
  }
  90% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3) 90%, rgb(0, 0, 0) 90%);
	animation-timing-function: linear;
  }
  100% {
    background: linear-gradient(to right, rgba(32, 167, 77, .3+) 100%, rgb(0, 0, 0) 100%);
	animation-timing-function: linear;
  }
}

/*============================= Spinner 7 =====================================*/

td#sp_07{
	position:relative;
	height:105px;
}

.wrapper-7::before, .wrapper-7::after, .wrapper-7 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.wrapper-7 {
  width: 80px;
  height: 80px;
  margin: auto;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 0, 0.5);
  background: radial-gradient(circle,rgba(42, 123, 155, 1) 0%, rgba(42, 123, 155, 1) 28%, rgba(83, 237, 191, 1) 57%);
  animation: pumpMe 8s linear infinite;
}
.wrapper-7::before, .wrapper-7::after {
  content: "";
  z-index: -1;
  margin: -10px;
  box-shadow: inset 0 0 0 2px  rgba(0, 255, 0, 1);
  animation: clipMe 8s linear infinite;
}
.wrapper-7::before {
  animation-delay: -4s;
}

@keyframes pumpMe {
	0%, 50%, 100% {
		background: radial-gradient(circle,rgba(42, 123, 155, 1) 0%, rgba(42, 123, 155, 1) 28%, rgba(83, 237, 191, 1) 57%);
	}
	25%, 75% {
		background: radial-gradient(circle,rgba(42, 123, 155, 1) 33%, rgba(42, 123, 155, 1) 28%, rgba(83, 237, 191, 1) 87%);
	}
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 100px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 100px, 0px);
  }
  50% {
    clip: rect(88px, 100px, 100px, 0px);
  }
  75% {
    clip: rect(0px, 100px, 100px, 88px);
  }
}

/*============================= Spinner 8 =====================================*/

.star-wrapper{
	position:relative;
	width:80px;
	height:80px;
	margin:10px auto;
	padding:10px;
	border:3px dotted rgba(112, 175, 4, 1);
	border-left:transparent;
	border-radius:50%;
	animation: spinn_star_out 6s infinite;
}

.star {
	width: 50px;
	height: 50px;
	background-color: gold;
	clip-path: polygon(
		50% 0%,
		61% 35%,
		100% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		0% 35%,
		39% 35%
	);
	animation: spinn_star_in 4s infinite;
}

@keyframes spinn_star_out {
  0% {
    transform: rotate(0);
	animation-timing-function: linear;
  }
  100% {
    transform: rotate(-360deg);
	animation-timing-function: linear;
  }
}

@keyframes spinn_star_in {
  0% {
    transform: rotate(0);
	animation-timing-function: linear;
  }
  100% {
    transform: rotate(360deg);
	animation-timing-function: linear;
  }
}


/*============================= Spinner 9 =====================================*/
div.wrapper-9{
	position:relative;
	width:100px;
	height:100px;
	margin:10px auto;
	border-radius:50%;
}
div.circle{
	position:relative;
	left:0;
	top:0;
	width:100px;
	height:100px;
	margin:10px auto;
	border-radius:50%;
	background: linear-gradient(35deg, rgba(112, 175, 4, 1) 0%, rgba(0, 75, 64, 1) 50%, rgba(32, 167, 77, 1) 100%);
	animation: spinn_round 8s infinite;
}

div.wrapper-9:before{
	content:' ';
	position:absolute;
	z-index:2;
	width:25px;
	height:25px;
	background-color:rgba(0, 255, 0, 1);
	border-radius:50%;
	animation: roundMe 4s infinite;
}

div.wrapper-9:after{
	content:' ';
	position:absolute;
	width:25px;
	height:25px;
	background-color:yellow;
	border-radius:50%;
	animation: roundMe2 4s infinite;
}

@keyframes roundMe {
  0%,100% {
    top: -3px; left:-3px; background-color:rgba(0, 255, 0, 1);
	animation-timing-function: linear;
  }
  25% {
    top: 53px; left:-3px;
	animation-timing-function: linear;
  }
  50% {
    top: 53px; left:53px;  background-color:rgba(0, 255, 255, 1);
	animation-timing-function: linear;    
  }
  75% {
    top: -3px; left:53px;
	animation-timing-function: linear;      
  }
}

@keyframes roundMe2 {
  0%,100% {
    right:-3px; bottom:-3px; background-color:rgba(0, 255, 0, 1);
	animation-timing-function: linear;
  }
  25% {
    right:-3px; bottom:53px;
	animation-timing-function: linear;
  }
  50% {
    right:53px; bottom:53px; background-color:rgba(255, 70, 255, 1);
	animation-timing-function: linear;    
  }
  75% {
    right:53px; bottom:-3px;
	animation-timing-function: linear;      
  }
}

@keyframes spinn_round {
  0% {
    transform: rotate(0);
	animation-timing-function: linear;
  }
  100% {
    transform: rotate(360deg);
	animation-timing-function: linear;
  }
}

/*============================= Spinner 10 =====================================*/

.wrapper-10{
	display:flex;
	width:205px;
	height:26px;
	margin:10px;
	border:2px solid rgba(112, 175, 4, 1);
	border-radius:9px;
}

.v-b{
	width:5px;
	height:18px;
	margin-top:4px;
	margin-bottom:4px;
	margin-left:5px;
	border-radius:9px;
	background-color:rgba(112, 175, 4, 1);
	opacity:.2;
	transition:opacity .5s;
}

.v-b-1{
	opacity:1;
	transition:opacity .5s;
}

.v-b-2{
	background-color:rgba(112, 175, 4, 1);
	opacity:.5;
	transition:opacity .5s;
}

/*============================= Spinner 11 =====================================*/
.wrapper-11{
	display:flex;
    justify-content: center;
	width:50px;
	height:50px;
	margin:10px;
}

.inner-circle{
	display:inline-block;
	width:3px;
	height:3px;
	background-image:linear-gradient(35deg,
					 rgba(42, 123, 155, 1) 0%, 
					 rgba(42, 123, 155, 1) 28%, 
					 rgba(83, 237, 191, 1) 57%);
	border-radius:50%;
	margin:auto;
	animation:blowup 1.5s infinite;
}

@keyframes blowup{
	0%,100% {
		width:3px; height:3px;
		transform: rotate(0);
		animation-timing-function: linear;
  }
  50% {
		width:25px; height:25px;
		transform: rotate(180deg);
		animation-timing-function: linear;
  }
  75% {
		width:50px; height:50px;
		transform: rotate(360deg);
		animation-timing-function: linear;
  }
}

/*============================= Spinner 12 =====================================*/
.wrapper-12{
	display:flex;
    justify-content: center;
	width:50px;
	height:50px;
	margin:10px;
	background: linear-gradient(35deg, rgba(112, 175, 4, 1) 0%, rgba(0, 75, 64, 1) 50%, rgba(32, 167, 77, 1) 100%);
	border-radius:50%;
	animation: spinn_twelfe 3s infinite;
	animation-timing-function: linear;
}

.border-circle{
	width:45px;
	height:45px;
	border-radius:50%;
	background-color:black;
	margin:auto;
}

@keyframes spinn_twelfe {
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(-600deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

/*============================= Spinner 13 =====================================*/
.text-image {
	font-size: 40px;
	font-style:italic;
	font-weight:600;
	background-image: repeating-conic-gradient(rgba(112, 175, 4, 1) 10%, rgba(0, 0, 255, 1) 20%, rgba(32, 167, 77, 1) 30%);
	background-size: cover;
	background-clip: text;
	color: transparent;
	animation: spinn_text 2s infinite;
	animation-timing-function: linear;
}

@keyframes spinn_text {
	0%{
		background-image: repeating-conic-gradient(rgba(112, 175, 4, 1) 10%, blue 20%, rgba(32, 167, 77, 1) 30%);
	}
	50%{
		background-image: radial-gradient(red, green, blue);
	}
	100%{
		background-image: conic-gradient(red, yellow, green);
	}
}