CSS Color Wheel Loaders

Developer

Size

5,381 Kb

Views

40,480

CSS Color Wheel Loaders Previews
CSS Color Wheel Loaders HTML Codes
CSS Color Wheel Loaders CSS Codes

How do I make an css color wheel loaders?

Six versions and tinker friendly : ). What is a css color wheel loaders? How do you make a css color wheel loaders? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

CSS Color Wheel Loaders Previews

CSS Color Wheel Loaders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Color Wheel Loaders</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="flex-centered"> <div class="box"> <div class="version">v1</div> <div class="color-wheel v1"> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> </div> </div> <div class="box"> <div class="version">v2</div> <div class="color-wheel v2"> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> </div> </div> <div class="box"> <div class="version">v3</div> <div class="color-wheel v3"> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> </div> </div> <div class="box"> <div class="version">v4</div> <div class="color-wheel v4"> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> </div> </div> <div class="box"> <div class="version">v5</div> <div class="color-wheel v5"> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> </div> </div> <div class="box"> <div class="version">v6</div> <div class="color-wheel v6"> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> <div class="slice"></div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script>
</body>
</html>

CSS Color Wheel Loaders - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background-color: #1f2336;
}
.flex-centered { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 95vh;
}
.flex-centered .box { position: relative; flex-grow: 1; height: 20em; min-width: 15em; border: 0.1em solid white; background-color: #323856; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 2em;
}
.flex-centered .box .version { position: absolute; top: 0.2em; left: 0.2em; color: white;
}
.color-wheel { position: relative; z-index: 1;
}
.color-wheel.v1 .slice { transform-origin: 50%;
}
.color-wheel.v2 { transform: scale(0.7); margin-top: -4em;
}
.color-wheel.v2 .slice { transform-origin: 50% 75%;
}
.color-wheel.v3 { transform: scale(0.8); margin-left: -2.2em;
}
.color-wheel.v3 .slice { transform-origin: 75%; border-radius: 1.25em;
}
.color-wheel.v4 { margin-left: -1.2em;
}
.color-wheel.v4 .slice { transform-origin: 60%; border-radius: 0em;
}
.color-wheel.v5 { transform: scale(0.5); margin-top: -7em; margin-left: -3.5em;
}
.color-wheel.v5 .slice { transform-origin: 100% 100%; border-radius: 20% 80%;
}
.color-wheel.v6 { transform: scale(0.4); margin-top: 11em; margin-left: 5em;
}
.color-wheel.v6 .slice { transform-origin: -50% -60%; border-radius: 0;
}
.color-wheel .slice { position: absolute; top: 0; left: 0; width: 100px; border: 100px solid transparent; border-left-width: 50px; border-right-width: 50px; border-top-color: #3cff85; border-radius: 3em; transform: translate(-50%, -50%);
}
.color-wheel .slice:nth-child(1) { z-index: -1; border-top-color: #3cff85; transform: translate(-50%, -50%) rotate(0deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-1 2s 0.04s infinite;
}
.color-wheel .slice:nth-child(2) { z-index: -2; border-top-color: #3cf7ff; transform: translate(-50%, -50%) rotate(7.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-2 2s 0.08s infinite;
}
.color-wheel .slice:nth-child(3) { z-index: -3; border-top-color: #3c75ff; transform: translate(-50%, -50%) rotate(14.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-3 2s 0.12s infinite;
}
.color-wheel .slice:nth-child(4) { z-index: -4; border-top-color: #853cff; transform: translate(-50%, -50%) rotate(21.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-4 2s 0.16s infinite;
}
.color-wheel .slice:nth-child(5) { z-index: -5; border-top-color: #ff3cf7; transform: translate(-50%, -50%) rotate(28.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-5 2s 0.2s infinite;
}
.color-wheel .slice:nth-child(6) { z-index: -6; border-top-color: #ff3c75; transform: translate(-50%, -50%) rotate(36deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-6 2s 0.24s infinite;
}
.color-wheel .slice:nth-child(7) { z-index: -7; border-top-color: #ff853c; transform: translate(-50%, -50%) rotate(43.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-7 2s 0.28s infinite;
}
.color-wheel .slice:nth-child(8) { z-index: -8; border-top-color: #f7ff3c; transform: translate(-50%, -50%) rotate(50.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-8 2s 0.32s infinite;
}
.color-wheel .slice:nth-child(9) { z-index: -9; border-top-color: #75ff3c; transform: translate(-50%, -50%) rotate(57.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-9 2s 0.36s infinite;
}
.color-wheel .slice:nth-child(10) { z-index: -10; border-top-color: #3cff85; transform: translate(-50%, -50%) rotate(64.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-10 2s 0.4s infinite;
}
.color-wheel .slice:nth-child(11) { z-index: -11; border-top-color: #3cf7ff; transform: translate(-50%, -50%) rotate(72deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-11 2s 0.44s infinite;
}
.color-wheel .slice:nth-child(12) { z-index: -12; border-top-color: #3c75ff; transform: translate(-50%, -50%) rotate(79.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-12 2s 0.48s infinite;
}
.color-wheel .slice:nth-child(13) { z-index: -13; border-top-color: #853cff; transform: translate(-50%, -50%) rotate(86.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-13 2s 0.52s infinite;
}
.color-wheel .slice:nth-child(14) { z-index: -14; border-top-color: #ff3cf7; transform: translate(-50%, -50%) rotate(93.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-14 2s 0.56s infinite;
}
.color-wheel .slice:nth-child(15) { z-index: -15; border-top-color: #ff3c75; transform: translate(-50%, -50%) rotate(100.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-15 2s 0.6s infinite;
}
.color-wheel .slice:nth-child(16) { z-index: -16; border-top-color: #ff853c; transform: translate(-50%, -50%) rotate(108deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-16 2s 0.64s infinite;
}
.color-wheel .slice:nth-child(17) { z-index: -17; border-top-color: #f7ff3c; transform: translate(-50%, -50%) rotate(115.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-17 2s 0.68s infinite;
}
.color-wheel .slice:nth-child(18) { z-index: -18; border-top-color: #75ff3c; transform: translate(-50%, -50%) rotate(122.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-18 2s 0.72s infinite;
}
.color-wheel .slice:nth-child(19) { z-index: -19; border-top-color: #3cff85; transform: translate(-50%, -50%) rotate(129.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-19 2s 0.76s infinite;
}
.color-wheel .slice:nth-child(20) { z-index: -20; border-top-color: #3cf7ff; transform: translate(-50%, -50%) rotate(136.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-20 2s 0.8s infinite;
}
.color-wheel .slice:nth-child(21) { z-index: -21; border-top-color: #3c75ff; transform: translate(-50%, -50%) rotate(144deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-21 2s 0.84s infinite;
}
.color-wheel .slice:nth-child(22) { z-index: -22; border-top-color: #853cff; transform: translate(-50%, -50%) rotate(151.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-22 2s 0.88s infinite;
}
.color-wheel .slice:nth-child(23) { z-index: -23; border-top-color: #ff3cf7; transform: translate(-50%, -50%) rotate(158.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-23 2s 0.92s infinite;
}
.color-wheel .slice:nth-child(24) { z-index: -24; border-top-color: #ff3c75; transform: translate(-50%, -50%) rotate(165.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-24 2s 0.96s infinite;
}
.color-wheel .slice:nth-child(25) { z-index: -25; border-top-color: #ff853c; transform: translate(-50%, -50%) rotate(172.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-25 2s 1s infinite;
}
.color-wheel .slice:nth-child(26) { z-index: -26; border-top-color: #f7ff3c; transform: translate(-50%, -50%) rotate(180deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-26 2s 1.04s infinite;
}
.color-wheel .slice:nth-child(27) { z-index: -27; border-top-color: #75ff3c; transform: translate(-50%, -50%) rotate(187.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-27 2s 1.08s infinite;
}
.color-wheel .slice:nth-child(28) { z-index: -28; border-top-color: #3cff85; transform: translate(-50%, -50%) rotate(194.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-28 2s 1.12s infinite;
}
.color-wheel .slice:nth-child(29) { z-index: -29; border-top-color: #3cf7ff; transform: translate(-50%, -50%) rotate(201.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-29 2s 1.16s infinite;
}
.color-wheel .slice:nth-child(30) { z-index: -30; border-top-color: #3c75ff; transform: translate(-50%, -50%) rotate(208.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-30 2s 1.2s infinite;
}
.color-wheel .slice:nth-child(31) { z-index: -31; border-top-color: #853cff; transform: translate(-50%, -50%) rotate(216deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-31 2s 1.24s infinite;
}
.color-wheel .slice:nth-child(32) { z-index: -32; border-top-color: #ff3cf7; transform: translate(-50%, -50%) rotate(223.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-32 2s 1.28s infinite;
}
.color-wheel .slice:nth-child(33) { z-index: -33; border-top-color: #ff3c75; transform: translate(-50%, -50%) rotate(230.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-33 2s 1.32s infinite;
}
.color-wheel .slice:nth-child(34) { z-index: -34; border-top-color: #ff853c; transform: translate(-50%, -50%) rotate(237.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-34 2s 1.36s infinite;
}
.color-wheel .slice:nth-child(35) { z-index: -35; border-top-color: #f7ff3c; transform: translate(-50%, -50%) rotate(244.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-35 2s 1.4s infinite;
}
.color-wheel .slice:nth-child(36) { z-index: -36; border-top-color: #75ff3c; transform: translate(-50%, -50%) rotate(252deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-36 2s 1.44s infinite;
}
.color-wheel .slice:nth-child(37) { z-index: -37; border-top-color: #3cff85; transform: translate(-50%, -50%) rotate(259.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-37 2s 1.48s infinite;
}
.color-wheel .slice:nth-child(38) { z-index: -38; border-top-color: #3cf7ff; transform: translate(-50%, -50%) rotate(266.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-38 2s 1.52s infinite;
}
.color-wheel .slice:nth-child(39) { z-index: -39; border-top-color: #3c75ff; transform: translate(-50%, -50%) rotate(273.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-39 2s 1.56s infinite;
}
.color-wheel .slice:nth-child(40) { z-index: -40; border-top-color: #853cff; transform: translate(-50%, -50%) rotate(280.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-40 2s 1.6s infinite;
}
.color-wheel .slice:nth-child(41) { z-index: -41; border-top-color: #ff3cf7; transform: translate(-50%, -50%) rotate(288deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-41 2s 1.64s infinite;
}
.color-wheel .slice:nth-child(42) { z-index: -42; border-top-color: #ff3c75; transform: translate(-50%, -50%) rotate(295.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-42 2s 1.68s infinite;
}
.color-wheel .slice:nth-child(43) { z-index: -43; border-top-color: #ff853c; transform: translate(-50%, -50%) rotate(302.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-43 2s 1.72s infinite;
}
.color-wheel .slice:nth-child(44) { z-index: -44; border-top-color: #f7ff3c; transform: translate(-50%, -50%) rotate(309.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-44 2s 1.76s infinite;
}
.color-wheel .slice:nth-child(45) { z-index: -45; border-top-color: #75ff3c; transform: translate(-50%, -50%) rotate(316.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-45 2s 1.8s infinite;
}
.color-wheel .slice:nth-child(46) { z-index: -46; border-top-color: #3cff85; transform: translate(-50%, -50%) rotate(324deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-46 2s 1.84s infinite;
}
.color-wheel .slice:nth-child(47) { z-index: -47; border-top-color: #3cf7ff; transform: translate(-50%, -50%) rotate(331.2deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-47 2s 1.88s infinite;
}
.color-wheel .slice:nth-child(48) { z-index: -48; border-top-color: #3c75ff; transform: translate(-50%, -50%) rotate(338.4deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-48 2s 1.92s infinite;
}
.color-wheel .slice:nth-child(49) { z-index: -49; border-top-color: #853cff; transform: translate(-50%, -50%) rotate(345.6deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-49 2s 1.96s infinite;
}
.color-wheel .slice:nth-child(50) { z-index: -50; border-top-color: #ff3cf7; transform: translate(-50%, -50%) rotate(352.8deg); -webkit-animation-timing-function: linear; animation: colorWheelLoad-50 2s 2s infinite;
}
.pulsing-spin { -webkit-animation-name: rotate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
}
@keyframes colorWheelLoad-1 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes colorWheelLoad-2 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(7.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(7.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(7.2deg); }
}
@keyframes colorWheelLoad-3 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(14.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(14.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(14.4deg); }
}
@keyframes colorWheelLoad-4 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(21.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(21.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(21.6deg); }
}
@keyframes colorWheelLoad-5 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(28.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(28.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(28.8deg); }
}
@keyframes colorWheelLoad-6 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(36deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(36deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(36deg); }
}
@keyframes colorWheelLoad-7 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(43.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(43.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(43.2deg); }
}
@keyframes colorWheelLoad-8 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(50.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(50.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(50.4deg); }
}
@keyframes colorWheelLoad-9 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(57.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(57.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(57.6deg); }
}
@keyframes colorWheelLoad-10 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(64.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(64.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(64.8deg); }
}
@keyframes colorWheelLoad-11 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(72deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(72deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(72deg); }
}
@keyframes colorWheelLoad-12 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(79.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(79.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(79.2deg); }
}
@keyframes colorWheelLoad-13 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(86.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(86.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(86.4deg); }
}
@keyframes colorWheelLoad-14 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(93.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(93.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(93.6deg); }
}
@keyframes colorWheelLoad-15 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(100.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(100.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(100.8deg); }
}
@keyframes colorWheelLoad-16 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(108deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(108deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(108deg); }
}
@keyframes colorWheelLoad-17 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(115.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(115.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(115.2deg); }
}
@keyframes colorWheelLoad-18 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(122.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(122.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(122.4deg); }
}
@keyframes colorWheelLoad-19 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(129.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(129.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(129.6deg); }
}
@keyframes colorWheelLoad-20 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(136.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(136.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(136.8deg); }
}
@keyframes colorWheelLoad-21 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(144deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(144deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(144deg); }
}
@keyframes colorWheelLoad-22 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(151.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(151.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(151.2deg); }
}
@keyframes colorWheelLoad-23 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(158.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(158.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(158.4deg); }
}
@keyframes colorWheelLoad-24 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(165.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(165.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(165.6deg); }
}
@keyframes colorWheelLoad-25 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(172.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(172.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(172.8deg); }
}
@keyframes colorWheelLoad-26 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(180deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(180deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); }
}
@keyframes colorWheelLoad-27 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(187.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(187.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(187.2deg); }
}
@keyframes colorWheelLoad-28 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(194.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(194.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(194.4deg); }
}
@keyframes colorWheelLoad-29 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(201.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(201.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(201.6deg); }
}
@keyframes colorWheelLoad-30 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(208.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(208.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(208.8deg); }
}
@keyframes colorWheelLoad-31 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(216deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(216deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(216deg); }
}
@keyframes colorWheelLoad-32 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(223.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(223.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(223.2deg); }
}
@keyframes colorWheelLoad-33 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(230.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(230.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(230.4deg); }
}
@keyframes colorWheelLoad-34 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(237.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(237.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(237.6deg); }
}
@keyframes colorWheelLoad-35 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(244.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(244.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(244.8deg); }
}
@keyframes colorWheelLoad-36 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(252deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(252deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(252deg); }
}
@keyframes colorWheelLoad-37 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(259.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(259.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(259.2deg); }
}
@keyframes colorWheelLoad-38 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(266.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(266.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(266.4deg); }
}
@keyframes colorWheelLoad-39 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(273.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(273.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(273.6deg); }
}
@keyframes colorWheelLoad-40 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(280.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(280.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(280.8deg); }
}
@keyframes colorWheelLoad-41 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(288deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(288deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(288deg); }
}
@keyframes colorWheelLoad-42 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(295.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(295.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(295.2deg); }
}
@keyframes colorWheelLoad-43 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(302.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(302.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(302.4deg); }
}
@keyframes colorWheelLoad-44 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(309.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(309.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(309.6deg); }
}
@keyframes colorWheelLoad-45 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(316.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(316.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(316.8deg); }
}
@keyframes colorWheelLoad-46 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(324deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(324deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(324deg); }
}
@keyframes colorWheelLoad-47 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(331.2deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(331.2deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(331.2deg); }
}
@keyframes colorWheelLoad-48 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(338.4deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(338.4deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(338.4deg); }
}
@keyframes colorWheelLoad-49 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(345.6deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(345.6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(345.6deg); }
}
@keyframes colorWheelLoad-50 { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(352.8deg); } 25%,	75% { opacity: 0.35; transform: translate(-50%, -50%) rotate(352.8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(352.8deg); }
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Home Page	Home
Developer	Robert Lowe
Username	rlo206
Uploaded	July 23, 2022
Rating	4
Size	5,381 Kb
Views	40,480

Do you need developer help for CSS Color Wheel Loaders?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes

Name	Size
Customizable ripples with angular	4,825 Kb
Whirlpool Spinner with 4 sizes	3,473 Kb
Exploring ngForm	7,554 Kb
The Rainball	4,656 Kb
Semantic Element Document Outline	3,153 Kb
Dynamic UI with AngularJS attributes	5,934 Kb
Interactive data table with Angular and SCSS	9,618 Kb
Windows 10 toggle button directive	4,256 Kb
Draggables in pure angular	5,167 Kb
Testing Semantic UI Grid	2,832 Kb

Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Boxes	H3l1um	2,563 Kb
Css3 only dropdown menu	Riogrande	2,519 Kb
Sticky div	Kaslab	2,225 Kb
Flying Bee	Pwsm50	3,711 Kb
Jstam.com Home Page	Jstam	10,558 Kb
Box Shadow Effects	Retrofuturistic	2,143 Kb
Adding and Removing Element	Accimeesterlin	2,119 Kb
Two column of responsive height	Fixie	2,908 Kb
JS Beispiel getElementsByClassName 3	HSZG-Frontend-Kurs	1,988 Kb
React Markdown Previewer	C0d0er	3,190 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!