<link href="@import url('https://css.gg/ccjsonxml?=|abstract|add-r|add|adidas|alarm|album|align-bottom|align-center|align-left|align-middle|align-right|align-top|apple-watch|arrow-bottom-left-o|arrow-bottom-left-r|arrow-bottom-left|arrow-bottom-right-o|arrow-bottom-right-r|arrow-bottom-right|arrow-down-o|arrow-down-r|arrow-down|arrow-left-o|arrow-left-r|arrow-left|arrow-long-down-c|arrow-long-down-e|arrow-long-down-l|arrow-long-down-r|arrow-long-down|arrow-long-left-c|arrow-long-left-e|arrow-long-left-l|arrow-long-left-r|arrow-long-left|arrow-long-right-c|arrow-long-right-e|arrow-long-right-l|arrow-long-right-r|arrow-long-right|arrow-long-up-c|arrow-long-up-e|arrow-long-up-l|arrow-long-up-r|arrow-long-up|arrow-right-o|arrow-right-r|arrow-right|arrow-top-left-o|arrow-top-left-r|arrow-top-left|arrow-top-right-o|arrow-top-right-r|arrow-top-right|arrow-up-o|arrow-up-r|arrow-up|assign|attachment|backspace|battery-empty|battery-full|battery|bell|block|bmw|board|bolt|bookmark|border-all|border-bottom|border-left|border-right|border-style-dashed|border-style-dotted|border-style-solid|border-top|bot|bowl|box|boy|brackets|briefcase|browser|bulb|c-plus-plus|calculator|calendar-dates|calendar-due|calendar-next|calendar-today|calendar-two|calendar|camera|cap|captions|cast|chart|check-o|check-r|check|chevron-double-down-o|chevron-double-down-r|chevron-double-down|chevron-double-left-o|chevron-double-left-r|chevron-double-left|chevron-double-right-o|chevron-double-right-r|chevron-double-right|chevron-double-up-o|chevron-double-up-r|chevron-double-up|chevron-down-o|chevron-down-r|chevron-down|chevron-left-o|chevron-left-r|chevron-left|chevron-right-o|chevron-right-r|chevron-right|chevron-up-o|chevron-up-r|chevron-up|circleci|clipboard|close-o|close-r|close|cloud|code-climate|code-slash|code|coffe|collage|color-bucket|color-picker|comedy-central|comment|compress|controller|copy|copyright|corner-down-left|corner-down-right|corner-left-down|corner-left-up|corner-right-down|corner-right-up|corner-up-left|corner-up-right|credit-card|crop|cross|crowdfire|danger|dark-mode|data|database|designmodo|desktop|details-less|details-more|dialpad|digitalocean|directory|disc|display-flex|display-fullwidth|display-grid|display-spacing|distribute-horizontal|distribute-vertical|dolby|dollar|dribbble|drive|drop|duplicate|edit-black-point|edit-contrast|edit-exposure|edit-fade|edit-highlight|edit-noise|edit-shadows|eject|enter|erase|ereader|euro|eventbrite|expand|export|extension|external|eye|feed|file-add|file-document|file-remove|file|film|flag|folder-add|folder-remove|folder|format-bold|format-center|format-color|format-heading|format-indent-decrease|format-indent-increase|format-italic|format-justify|format-left|format-line-height|format-right|format-separator|format-slash|format-strike|format-text|format-underline|format-uppercase|games|gender-female|gender-male|ghost|gift|girl|git-branch|git-commit|git-fork|git-pull|gitter|glass|globe|google-tasks|google|gym|hashtag|headset|heart|hello|home-screen|home|icecream|if-design|image|import|inbox|indie-hackers|infinity|info|inpicture|insert-after-o|insert-after-r|insert-after|insert-before-o|insert-before-r|insert-before|instagram|internal|key|keyboard|keyhole|laptop|layout-grid-small|layout-grid|layout-list|linear|link|list|live-photo|loadbar-alt|loadbar-doc|loadbar-sound|loadbar|lock-unlock|lock|log-in|log-off|log-out|magnet|mail-forward|mail-open|mail-reply|mail|math-divide|math-equal|math-minus|math-percent|math-plus|maximize-alt|maximize|media-live|media-podcast|menu-boxed|menu-left|menu-right|menu-round|menu|merge-horizontal|merge-vertical|mic|microbit|microsoft|minimize-alt|minimize|monday|moon|more-alt|more-vertical-alt|more-vertical|more|mouse|move-down|move-left|move-right|move-task|move-up|music-note|music-speaker|music|notes|oculus|options|organisation|overflow|pacman|password|path-back|path-crop|path-divide|path-exclude|path-front|path-intersect|path-outline|path-trim|path-unite|patreon|pen|pentagon-down|pentagon-left|pentagon-right|pentagon-up|performance|pexels|photoscan|piano|pill|pin-alt|pin-bottom|pin-top|pin|play-backwards|play-forwards|play-list-add|play-list-check|play-list-remove|play-list|play-pause-o|play-pause-r|play-pause|play-stop-o|play-stop-r|play-stop|play-track-next-o|play-track-next-r|play-track-next|play-track-prev-o|play-track-prev-r|play-track-prev|pocket|pokemon|polaroid|poll|printer|product-hunt|profile|pull-clear|push-chevron-down-o|push-chevron-down-r|push-chevron-down|push-chevron-left-o|push-chevron-left-r|push-chevron-left|push-chevron-right-o|push-chevron-right-r|push-chevron-right|push-chevron-up-o|push-chevron-up-r|push-chevron-up|push-down|push-left|push-right|push-up|qr|quote-o|quote|radio-check|radio-checked|ratio|read|readme|redo|remote|remove-r|remove|reorder|repeat|ring|row-first|row-last|ruler|sand-clock|screen-mirror|screen-shot|screen-wide|screen|search|select-o|select-r|select|server|serverless|shape-circle|shape-half-circle|shape-rhombus|shape-square|shape-zigzag|share|shield|shopping-bag|shortcut|shutterstock|sidebar-open|sidebar-right|sidebar|signal|smartphone-chip|smartphone-ram|smartphone-shake|smartphone|smile-neutral|smile-sad|smile|software-download|software-upload|sort-az|sort-za|spectrum|spinner-alt|spinner|square|stack|stark|stopwatch|studio|sun|support|swap-vertical|swap|sweden|swiss|sync|tag|tally|template|tennis|terminal|thermostat|time|timer|toggle-off|toggle-on|toggle-square-off|toggle-square|toolbar-bottom|toolbar-left|toolbar-right|toolbar-top|toolbox|track|trash-empty|trash|trello|trending|trophy|tv|twilio|unavailable|unblock|undo|unsplash|usb-c|usb|voice-mail|volume|webcam|website|windows|youtube|zeit|zoom-in|zoom-out');" rel="stylesheet">

Loadbar Sound

456 Views 12 Downloads - 7 API calls 40 Lines - 829 Bytes Dec 18, 2019 interfacesigns
1@keyframes gg-bar {
2    10% {box-shadow: inset 0 -4px 0}
3    30% {box-shadow: inset 0 -10px 0}
4    60% {box-shadow: inset 0 -6px 0}
5    80% {box-shadow: inset 0 -8px 0}
6    to {box-shadow: inset 0 -2px 0}
7}
8
9.gg-loadbar-sound,
10.gg-loadbar-sound::after,
11.gg-loadbar-sound::before {
12    display: block;
13    box-sizing: border-box;
14    width: 2px;
15    height: 12px;
16    box-shadow: inset 0 -12px 0;
17    animation: gg-bar 1.3s ease infinite alternate
18}
19
20.gg-loadbar-sound {
21    position: relative;
22    transform: scale(var(--ggs,1))
23}
24
25.gg-loadbar-sound::after,
26.gg-loadbar-sound::before {
27    content: "";
28    position: absolute;
29    bottom: 0
30}
31
32.gg-loadbar-sound::before {
33    left: -4px;
34    animation-delay: -2.4s
35}
36
37.gg-loadbar-sound::after {
38    right: -4px;
39    animation-delay: -3.7s
40}
Related to: Loadbar (3) View all - 507 icons
Loadbar Sound developed into an amazing CSS icon made by using attributes such as: box-shadow, width, height, box-shadow, animation, transform, animation-delay,
Some stats, it has: 40 Lines of code at 829b & 640b after compiling. Pretty wonderful 🤗 don't you think ?.