Loaders · community component

Google Color Spinner Loader

El anillo multicolor distintivo de Google girando continuamente en forma de spinner.

CSSMIT licenseUpdated today

◉ 350 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #colorful #loaders #spinner
-->
<div class="google-spin"></div>

<!--
  Author: @codepeek
  License: MIT
  Tags: #colorful #loaders #spinner
-->
<div class="google-spin"></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #colorful #loaders #spinner
 */

.google-spin {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ea4335 0deg 90deg,
    #4285f4 90deg 180deg,
    #34a853 180deg 270deg,
    #fbbc05 270deg 360deg
  );
  mask: radial-gradient(circle at center, transparent 55%, #000 56%);
  -webkit-mask: radial-gradient(circle at center, transparent 55%, #000 56%);
  animation: gSpin 1.2s linear infinite;
}
@keyframes gSpin {
  100% { transform: rotate(360deg); }
}

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #colorful #loaders #spinner
 */

.google-spin {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ea4335 0deg 90deg,
    #4285f4 90deg 180deg,
    #34a853 180deg 270deg,
    #fbbc05 270deg 360deg
  );
  mask: radial-gradient(circle at center, transparent 55%, #000 56%);
  -webkit-mask: radial-gradient(circle at center, transparent 55%, #000 56%);
  animation: gSpin 1.2s linear infinite;
}
@keyframes gSpin {
  100% { transform: rotate(360deg); }
}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryLoaders

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#colorful #loaders #spinner

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.