A css loading animation which uses keyframes as well as SASS and Compass to position the dots around the edge of the circle. It also uses haml and prefix-free :)
A Pen by Hillary Thomas on CodePen.
yuri-ktm
This file contains hidden or 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
| <div class="loader"> | |
| <div class="bar1"></div> | |
| <div class="bar2"></div> | |
| <div class="bar3"></div> | |
| <div class="bar4"></div> | |
| <div class="bar5"></div> | |
| <div class="bar6"></div> | |
| </div> |
yuri-ktm
/ colourful-flower-popup-menu.markdown
Created
June 27, 2022 09:04
Colourful Flower Popup Menu
This file contains hidden or 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
| mixin drawer(position) | |
| .chest__drawer.drawer(data-position=position) | |
| details | |
| summary | |
| .drawer__structure | |
| .drawer__panel.drawer__panel--back | |
| block | |
| .drawer__panel.drawer__panel--bottom | |
| .drawer__panel.drawer__panel--right | |
| .drawer__panel.drawer__panel--left |
This file contains hidden or 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
| document.body.innerHTML += '<a target="_blank" href="http://alexkatz.me"><div id="svg-wrapper"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 73 63" style="enable-background:new 0 0 73 63;" xml:space="preserve"> <style type="text/css"> .st0{fill:#231F20;} </style> <path id="Combined-Shape" class="st0" d="M72.9,56.2l-0.5,0.4c-0.5,0.4-1.1,0.8-1.6,1.2l-0.4,0.3L70,57.9c-0.3-0.2-0.7-0.3-1.2-0.3 c-1.6,0-3.9,1.2-6,2.3c-2.4,1.2-4.9,2.5-7.1,2.6c-1,0-1.5-0.4-1.8-0.7c-0.9-1.2,0.3-3.4,1.7-6c1.3-2.5,3-5.6,1.8-6.6 C57.3,49,57.1,49,56.8,49c-1.5,0-4.6,2-8,5.1c-1.1,1-2.2,2-3.2,3c-3,2.9-5.4,5.3-7.5,5.3c-0.5,0-1-0.2-1.2-0.5 C35.1,59.5,40.4,50,41,48.9c0.9-1.7,1.9-3.3,2.8-5c2.4-4.1,4.6-7.9,3.8-9.3c-0.1-0.2-0.2-0.3-0.5-0.3c-2.1,0-7.8,4.4-13,10.9 c-2.6,3.1-5,6.5-7.1,9.5c-3.5,5.1-5.3,7.5-6.9,7.5c-0.3,0-0.5,0-0.6-0.1c-0.2-0.1-0.3-0.2-0.4-0.3c-1.7-2.2,2.1-14.6,7.4-24.2 c2.5-5.1,5.6-9.8,8.3-14c3.4-5.4,7.1-11.6,5.2-11.3c-1.5,0.2-4.1,1.3-7.8,4.3c- |
This file contains hidden or 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
| - var texts = ['W', 'e', 'l', 'c', 'o', 'm', 'e', ': )']; | |
| - var number_of_particle = 12; | |
| - for (var i = 0; i < texts.length; i++) | |
| .background(class="background" + i) | |
| .criterion | |
| - for (var i = 0; i < texts.length; i++) | |
| .text(class='text' + i) #{texts[i]} | |
| - for (var i = 0; i < texts.length; i++) | |
| .frame(class='frame' + i) |
This file contains hidden or 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
| <body> | |
| <div class="animation01"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="animation02"> | |
| <div></div> |
NewerOlder