A Pen by beatrizsmerino on CodePen.
Created
October 5, 2020 16:55
-
-
Save beatrizsmerino/d09b0f94c388d1c97c50515140b7b112 to your computer and use it in GitHub Desktop.
zYBOGBO
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg data-name="loader-cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 267.6 168"> | |
| <title>loader-cloud</title> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stop-color="#3be0ec" /> | |
| <stop offset="100%" stop-color="#5eaefd" /> | |
| </linearGradient> | |
| <path data-name="circle-1" d="M54.77,67.09A50,50,0,1,1,51,67c1.26,0,2.51,0,3.75.14" stroke="url(#gradient)" /> | |
| <path data-name="circle-2" d="M110.71,34.41a49.51,49.51,0,1,1-9.08-.84,49.51,49.51,0,0,1,9.08.84" stroke="url(#gradient)" /> | |
| <path data-name="circle-3" d="M110.71,34.4a65.45,65.45,0,1,1-8.37,32,65.42,65.42,0,0,1,8.37-32" stroke="url(#gradient)"/> | |
| <path data-name="circle-4" d="M233.22,70.65A49.55,49.55,0,1,1,217.12,68a49.53,49.53,0,0,1,16.1,2.67" stroke="url(#gradient)" /> | |
| <path data-name="cloud" d="M233.1,70.6c0.1-1.4,0.1-2.8,0.1-4.2c0-36.1-29.3-65.4-65.4-65.4c-24.5,0-45.9,13.5-57.1,33.4 c-2.9-0.5-6-0.8-9.1-0.8c-21.7,0-40.2,14-46.9,33.5c-1.2-0.1-2.5-0.2-3.8-0.2c-27.6,0-50,22.4-50,50s22.4,50,50,50h166.1 c27.3,0,49.5-22.2,49.5-49.5C266.6,95.7,252.6,77.3,233.1,70.6z" stroke="url(#gradient)" /> | |
| <path data-name="cloud-light" d="M233.1,70.6c0.1-1.4,0.1-2.8,0.1-4.2c0-36.1-29.3-65.4-65.4-65.4c-24.5,0-45.9,13.5-57.1,33.4 c-2.9-0.5-6-0.8-9.1-0.8c-21.7,0-40.2,14-46.9,33.5c-1.2-0.1-2.5-0.2-3.8-0.2c-27.6,0-50,22.4-50,50s22.4,50,50,50h166.1 c27.3,0,49.5-22.2,49.5-49.5C266.6,95.7,252.6,77.3,233.1,70.6z" /> | |
| </svg> | |
| <svg data-name="loader-cloud-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 267.04 167.99"> | |
| <title>loader-cloud-2</title> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" stop-color="#3be0ec" /> | |
| <stop offset="100%" stop-color="#5eaefd" /> | |
| </linearGradient> | |
| <path data-name="circle-1" d="M54.8,67.1c-1.2-0.1-2.5-0.2-3.8-0.2c-27.6,0-50,22.4-50,50s22.4,50,50,50" stroke="url(#gradient)" /> | |
| <path data-name="circle-2" d="M110.7,34.4c-2.9-0.5-6-0.8-9.1-0.8c-21.7,0-40.2,14-46.9,33.5" stroke="url(#gradient)" /> | |
| <path data-name="circle-3" d="M233.1,70.6c0.1-1.4,0.1-2.8,0.1-4.2c0-36.1-29.3-65.4-65.4-65.4c-24.5,0-45.9,13.5-57.1,33.4" stroke="url(#gradient)" /> | |
| <path data-name="circle-4" d="M217.1,167c27.3,0,49.5-22.2,49.5-49.5c0-21.8-14-40.2-33.6-46.9" stroke="url(#gradient)" /> | |
| <path data-name="line" d="M51,167h166.1" stroke="url(#gradient)" /> | |
| <path data-name="cloud" d="M233.1,70.6c0.1-1.4,0.1-2.8,0.1-4.2c0-36.1-29.3-65.4-65.4-65.4c-24.5,0-45.9,13.5-57.1,33.4 c-2.9-0.5-6-0.8-9.1-0.8c-21.7,0-40.2,14-46.9,33.5c-1.2-0.1-2.5-0.2-3.8-0.2c-27.6,0-50,22.4-50,50s22.4,50,50,50h166.1 c27.3,0,49.5-22.2,49.5-49.5C266.6,95.7,252.6,77.3,233.1,70.6z" stroke="url(#gradient)" /> | |
| <path data-name="cloud-light" d="M233.1,70.6c0.1-1.4,0.1-2.8,0.1-4.2c0-36.1-29.3-65.4-65.4-65.4c-24.5,0-45.9,13.5-57.1,33.4 c-2.9-0.5-6-0.8-9.1-0.8c-21.7,0-40.2,14-46.9,33.5c-1.2-0.1-2.5-0.2-3.8-0.2c-27.6,0-50,22.4-50,50s22.4,50,50,50h166.1 c27.3,0,49.5-22.2,49.5-49.5C266.6,95.7,252.6,77.3,233.1,70.6z" /> | |
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| const paths = document.querySelectorAll("[data-name='loader-cloud'] path"); | |
| [...paths].map(path => { | |
| let name = path.getAttribute('data-name'); | |
| let length = path.getTotalLength(); | |
| path.setAttribute("stroke-dasharray", length); | |
| path.setAttribute("stroke-dashoffset", length); | |
| console.info(name, length); | |
| }); | |
| })(); | |
| (function () { | |
| const paths = document.querySelectorAll("[data-name='loader-cloud-2'] path:not([data-name='line'])"); | |
| [...paths].map(path => { | |
| let center = path.getBoundingClientRect().width; | |
| let name = path.getAttribute('data-name'); | |
| let length = path.getTotalLength(); | |
| path.setAttribute("stroke-dasharray", length); | |
| path.setAttribute("stroke-dashoffset", length); | |
| console.info({ | |
| "name": name, | |
| "length": length, | |
| "center": center | |
| }); | |
| }); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --color-black: #000; | |
| --color-white: #fff; | |
| --color-blue-light: #3be0ec; | |
| } | |
| body { | |
| padding: 2rem; | |
| display: flex; | |
| background-color: var(--color-black); | |
| } | |
| svg{ | |
| max-height: 10rem; | |
| margin: 2rem; | |
| display: inline-block; | |
| } | |
| @keyframes circle { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes circle-hide { | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes circle-2 { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes cloud { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| [data-name="loader-cloud"] { | |
| overflow: visible; | |
| path { | |
| fill: none; | |
| stroke-miterlimit: 10; | |
| stroke-width: 3; | |
| stroke-linecap: round; | |
| &[data-name^="circle-"] { | |
| } | |
| &[data-name="circle-1"] { | |
| animation: circle 1s linear 0s forwards, circle-hide 0.5s linear 1s forwards; | |
| } | |
| &[data-name="circle-2"] { | |
| animation: circle 1s linear 0.7s forwards, circle-hide 0.5s linear 2.2s forwards;; | |
| } | |
| &[data-name="circle-3"] { | |
| animation: circle 1s linear 1s forwards, circle-hide 1s linear 1.8s forwards;; | |
| } | |
| &[data-name="circle-4"] { | |
| animation: circle 1s linear 0.5s forwards, circle-hide 0.5s linear 2s forwards;; | |
| } | |
| &[data-name="cloud"] { | |
| stroke-width: 4; | |
| animation: cloud 2s linear 2s forwards; | |
| } | |
| &[data-name="cloud-light"] { | |
| stroke-width: 6; | |
| stroke: var(--color-white); | |
| animation: cloud 2.2s linear 1.5s forwards; | |
| } | |
| } | |
| } | |
| [data-name="loader-cloud-2"] { | |
| overflow: visible; | |
| path { | |
| fill: none; | |
| stroke-miterlimit: 10; | |
| stroke-width: 3; | |
| stroke-linecap: round; | |
| &[data-name^="circle-"] { | |
| } | |
| &[data-name="circle-1"] { | |
| animation: circle-2 2s linear 0s forwards; | |
| } | |
| &[data-name="circle-2"] { | |
| animation: circle-2 2s linear 2s forwards; | |
| } | |
| &[data-name="circle-3"] { | |
| animation: circle-2 2s linear 1.5s forwards; | |
| } | |
| &[data-name="circle-4"] { | |
| animation: circle-2 2s linear 2.5s forwards; | |
| } | |
| &[data-name="cloud"] { | |
| stroke-width: 4; | |
| animation: cloud 3s linear 4s forwards; | |
| } | |
| &[data-name="cloud-light"] { | |
| stroke-width: 6; | |
| stroke: var(--color-white); | |
| animation: cloud 3.2s linear 5s forwards; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment