Created for this blog post: Isometric loading indicator with CSS http://blog.learningspaces.io/animated-loading-indicator-with-isometric-cubes/
LearningSpaces: http://learningspaces.io
A Pen by Matthijs Kuiper on CodePen.
Charleno Pires charlenopires
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
| <div class="container"> | |
| <a href="#" class="special">Le nostre damigiane</a> | |
| </div> |
charlenopires
/ Isometric-cubes-with-HTML,-CSS-and-SVG-(animated).markdown
Created
November 28, 2014 01:54
Isometric cubes with HTML, CSS and SVG (animated)
charlenopires
/ Modern-HTML5-Lightbox-in-12-Lines-of-JavaScript.markdown
Created
November 28, 2014 01:56
Modern HTML5 Lightbox in 12 Lines of JavaScript
Uses the <dialog> modal element to display large images, flexbox for thumbnails. Complete explanatory article. Photographs by Richard Kardhordó, licensed under Creative Commons
A Pen by Dudley Storey on CodePen.
charlenopires
/ Facebook-Content-Placeholder.markdown
Created
November 28, 2014 02:00
Facebook Content Placeholder
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
| <div class="heartbeat"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 100" enable-background="new 0 0 200 100" xml:space="preserve"> | |
| <polyline id="high-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="450 450" stroke-dashoffset="450" data-time="0.25" points="2.4,58.7 70.8,58.7 76.1,37.2 81.1,58.7 89.9,58.7 93.8,70.5 102.8,2.7 110.6,98.7 115.3,58.7 126.4,58.7 134.4,48.7 142.4,58.7 197.8,58.7 "/> | |
| <polyline id="medium-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="380 380" stroke-dashoffset="380" data-time="0.3" points="2.4,58.7 70.8,58.7 76.1,42.2 81.1,58.7 89.9,58.7 93.8,70.5 102.8,12.7 110.6,88.7 115.3,58.7 | |
| 126.4,58.7 134.4,52.7 142.4,58.7 197.8,58.7 "/> | |
| <polyline id="low-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="320 320" stroke-dashoffset="320" data-time="0.35" points="2.4,58.7 70.8,58.7 76. |
A Pen by Jake B nedru on CodePen.
I've recently started playing QuizUp and i love the design of the whole app but the first thing I said when I saw it was "I want to make that loading icon" So this is my attempt at doing so. :)
(still a bit buggy because of problems I ran into with animating the box shadow so sometimes it animates other times it doesnt, if anyone has a fix that would be great! otherwise please enjoy and leave feedback.)
A Pen by Lewis Wright on CodePen.
Experimental module to create multiple animated sine waves.
A Pen by Isaac Suttell on CodePen.
A Pen by Siddharth Parmar on CodePen.
charlenopires
/ CSS-Colorful-Testimonials.markdown
Created
November 28, 2014 02:05
CSS Colorful Testimonials
A Pen by Ravinthranath on CodePen.