Ycons ~ Resource friendly loading indicators, based on Emojis (Plain CSS)

HTML

<h1>Copy & pastable</h1>
<p>Just <b>plain CSS</b>, no additional files, images, svgs, pngs or else needed.</p>
<p><a target="_blank" href="https://eypsilon.github.io/ycons/">Ycons - Emoji Icon Generator 🎨</a></p>

<div class="container">
<span class="ycon ycon-gear spin"></span>
<span class="ycon ycon-cyclone spin"></span>
<span class="ycon ycon-pizza spin"></span>
<span class="ycon ycon-camera spin"></span>
<span class="ycon ycon-atom-symbol spin"></span>
<span class="ycon ycon-anger-symbol spin"></span>
<span class="ycon ycon-spider-web spin"></span>
<span class="ycon ycon-shallow-pan-of-food spin"></span>
<span class="ycon ycon-fish-cake-with-swirl spin"></span>
<span class="ycon ycon-ice spin"></span>
<span class="ycon ycon-fork-and-knife-with-plate spin"></span>
<span class="ycon ycon-globe-with-meridians spin"></span>
<span class="ycon ycon-compass spin"></span>
<span class="ycon ycon-globe-showing-americas spin"></span>
<span class="ycon ycon-mountain spin"></span>
<span class="ycon ycon-wheel spin"></span>
<span class="ycon ycon-ring-buoy spin"></span>
<span class="ycon ycon-hourglass-done spin"></span>
<span class="ycon ycon-hourglass-not-done spin"></span>
<span class="ycon ycon-crescent-moon spin"></span>
<span class="ycon ycon-first-quarter-moon-face spin"></span>
<span class="ycon ycon-last-quarter-moon-face spin"></span>
<span class="ycon ycon-sun-with-face spin"></span>
<span class="ycon ycon-star spin"></span>
<span class="ycon ycon-glowing-star spin"></span>
<span class="ycon ycon-waxing-crescent-moon spin"></span>
<span class="ycon ycon-first-quarter-moon spin"></span>
<span class="ycon ycon-waxing-gibbous-moon spin"></span>
<span class="ycon ycon-waning-gibbous-moon spin"></span>
<span class="ycon ycon-last-quarter-moon spin"></span>
<span class="ycon ycon-waning-crescent-moon spin"></span>
<span class="ycon ycon-soccer-ball spin"></span>
<span class="ycon ycon-baseball spin"></span>
<span class="ycon...

CSS

.container {
  padding: 20px 30px;
  background: rgb(235, 232, 232);
}
.ycon {
    margin: 40px 50px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 2.25rem;
    pointer-events: none;
    user-select: none;
}
.ycon::before { display: inline-block; }

/* Transform utilities */
.ycon.mirror { transform: scaleX(-1); }
.ycon.flip { transform: scaleY(-1); }
.ycon.mirror.flip { transform: scale(-1, -1); }
.ycon.rotate-90 { transform: rotate(90deg); }
.ycon.rotate-180 { transform: rotate(180deg); }
.ycon.rotate-270 { transform: rotate(270deg); }

/* Filter utilities */
.ycon.gray { filter: grayscale(1); }
.ycon.blur { filter: blur(1px); }
.ycon.dim { filter: brightness(0.7); }
.ycon.bright { filter: brightness(1.3); }
.ycon.sepia { filter: sepia(1); }
.ycon.invert { filter: invert(1); }
.ycon.saturate { filter: saturate(1.5); }
.ycon.desaturate { filter: saturate(0.5); }

/* Animation utilities */
.ycon.spin { animation: ycon-spin 2s linear infinite; }
.ycon.pulse { animation: ycon-pulse 2s ease-in-out infinite; }
.ycon.bounce { animation: ycon-bounce 1s ease-in-out infinite; }

/* Keyframes */
@keyframes ycon-spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes ycon-pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}
@keyframes ycon-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
/* Size variants */
.ycon-xxs { font-size: 1rem; }
.ycon-xs { font-size: 1.25rem; }
.ycon-sm { font-size: 1.5rem; }
.ycon-md { font-size: 1.75rem; }
.ycon-lg { font-size: 2rem; }
.ycon-xl { font-size: 2.5rem; }
.ycon-xxl { font-size: 3rem; }

/* Icons */
.ycon-gear::before { content: "\2699"; }
.ycon-cyclone::before { content: "\1F300"; }
.ycon-pizza::before { content: "\1F355"; }
.ycon-camera::before { content: "\1F4F7"; }
.ycon-atom-symbol::before { content:...