Advertisements

Activity Indicator with CSS3

Works on desktop Safari, desktop Google Chrome, Android, iPhone, iPod Touch and iPad.

You’ve seen them. The things on the screen that mean you’ve got to wait for some activity to complete. They’re called activity indicators. They’re usually several pieces arranged in a circle. They spin around. And if things go really bad, you could be watching them spin for quite some time. Hopefully not.
activity indicator

Usually people make these with images. There are even Web sites dedicated to making this spinning baubles for you in animated gif format. Except that gif stink. Pngs look better. I’m going to show you two ways to implement an activity indicator. One starts off with an image that has been converted into 64 bit data. We’re talking about dataurls here. Dataurls eliminate the need for separate images. It’s the same image but reduced to data which you can paste directly in your document. Heck, you can paste it directly into your CSS file so you never have to worry about losing an image or rewriting the image path when you move the CSS. Cool, huh? And if you start with a large image, you can scale it down for small screens and low resolution devices, and scale it up for hi res devices, like the iPhone and iPod Touch retina display. Cooler still, you can make the activity indicator completely out of HTML and CSS, no images, no dataurl. And by using a scale transform, you never have to worry about resolution. It will always render smoothly.

So, let’s look at dataurls. The concept is simple. Instead of having a resource reside as an external file, you convert it into a 64 bit data sample which you can include in your document. In the case of an image, it’s basically embedding it in your HTML/CSS. You can encode images as dataurls in many ways, using PHP, Python, etc., or you can simply upload a file to a Web site that will conveniently do it for you. A dataurl looks something like this (Note: I trimmed off the data to fit here):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATEAAAEwCA+

For an image, you would do something like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATEAAAEwCA+...">

When you create your first dataurl you’ll probably be shocked at how big the resulting code is. Don’t worry. Somehow this winds up being more efficient for download and rendering than a traditional image. Besides being the source for an inline image, you could also embed the dataurl into your CSS as a background image. As I mentioned, my original image was large to allow for scaling up or down without loss of quality. I therefore add in some resizing to the CSS for the size of the element and the size of the background image:

.activityIndicator {
	/*
	The original height is:
	height: 304px;
	width: 305px;
	*/
	height: 40px;
	width: 40px;
	-webkit-background-size: 40px 40px;
	margin: 0px auto;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANUb...");

This is what I used to produce the image above. Now we need to animate it. That’s actually quite easy, just a couple of lines of CSS:

.activityIndicator {
	/*
	The original height is:
	height: 304px;
	width: 305px;
	*/
	height: 40px;
	width: 40px;
	-webkit-background-size: 40px 40px;
	margin: 0px auto;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANUb...");
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-name: spinnerAnim;
}
@-webkit-keyframes spinnerAnim {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

By using the keyframe animation, we can implement the continuously spinning activity indicator without using JavaScript. But, as I mentioned, dataurls tend to be verbose and are rather unsightly. I therefore came up with a reproduction of the activity indicator using only HTML and CSS3. At the end of this post are links to the working file. Download or view source of the online document to see what the dataurl looks like. It’s not pretty, but it is efficient. However, by reproducing the same image using markup and CSS, we can achieve the same result with even less code. The markup isn’t terribly complex, two parent contains and twelve blades:

<div id="activityIndicator">
	<div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
		<div class="blade"></div>
	</div>
</div>

That’s really all we need, the rest is done with CSS3 properties. You’ll notice that all the blades have the same class “blade.” We don’t need to give each one anything special because we can use CSS3 selectors to indicate each blade individually. To do this we’ll use the :nth-child selector. We first give all the blades some generic styling. Then we start from the second blade using the CSS3 nth-child selector: .blade:nth-child(2), then .blade:nth-child(3), etc. Since there are twelve blades, we need to rotate each one 30 degrees more than the previous. We also need to change the color by approximately 21.25% to go from and rgb value of 0 to 255. Since rgb values expect positive integers between 0 and 255, we need to round the float off to the nearest whole number. As you can see, CSS3 selectors allow us to create complex structures with minimal markup and CSS.

#activityIndicator {
	position: relative;
	width: 130px;
	height: 130px;
	margin: 0 auto;
	-webkit-perspective: 500;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-name: spinnerAnim2;
}
@-webkit-keyframes spinnerAnim2 {
	0% { -webkit-transform: rotate(0deg) scale(.29); }
	100% { -webkit-transform: rotate(360deg) scale(.29); }
}
#activityIndicator > div:first-of-type {
	margin-left: 58px;
	margin-top 0;
	width: 50%;
	height: 50%;
}
#activityIndicator .blade {
	position: absolute;
	height: 40px;
	width: 14px;
	background-color: rgba(234,234,234, .30);
	-webkit-border-radius: 10px;
	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 165%;
}

#activityIndicator .blade:nth-child(2) {
	-webkit-transform: rotate(30deg);
	background-color: rgba(212,212,212, .70);
}
#activityIndicator .blade:nth-child(3) {
	-webkit-transform: rotate(60deg);
	background-color: rgba(191,191,191, .70);
}
#activityIndicator .blade:nth-child(4) {
	-webkit-transform: rotate(90deg);
	background-color: rgba(170,170,170, .70);
}
#activityIndicator .blade:nth-child(5) {
	-webkit-transform: rotate(120deg);
	background-color: rgba(149,149,149, .70);
}
#activityIndicator .blade:nth-child(6) {
	-webkit-transform: rotate(150deg);
	background-color: rgba(128,128,128, .70);
}
#activityIndicator .blade:nth-child(7) {
	-webkit-transform: rotate(180deg);
	background-color: rgba(106,106,106, .70);
}
#activityIndicator .blade:nth-child(8) {
	-webkit-transform: rotate(210deg);
	background-color: rgba(85,85,85, .70);
}
#activityIndicator .blade:nth-child(9) {
	-webkit-transform: rotate(240deg);
	background-color: rgba(64,64,64, .70);
}
#activityIndicator .blade:nth-child(10) {
	-webkit-transform: rotate(270deg);
	background-color: rgba(42,42,42, .70);
}
#activityIndicator .blade:nth-child(11) {
	-webkit-transform: rotate(300deg);
	background-color: rgba(21,21,21, .70);
}
#activityIndicator .blade:nth-child(12) {
	-webkit-transform: rotate(330deg);
	background-color: rgba(0,0,0, .70);
}

You can try this out online or download the source code.

Update: September 14th, 2010
I forgot to mention one thing. If you look at the styles on #activityIndicator .blade you’ll notice the last two property definitions:

	-webkit-transform-origin-x: 50%;
	-webkit-transform-origin-y: 165%;

By setting the transform origin x value to 50% we fix the horizontal rotation to the blade’s center. By setting the transform origin vertical value to 165% we define the turning point at that distance from the start of the blade. Together these values cause the blades to rotate around leaving and empty circular space in the center, thus reproducing the appearance of the png image.

Advertisements

iPhone Modal Popup with HTML5, CSS3 & JavaScript

Works on Desktop Safari, Desktop Google Chrome, iPhone, iPod Touch, iPad. Note that I’ve included some styling for Firefox, even though it has no presence to speak of in the mobile space. In particular, Firefox 4 beta still lacks support for CSS3 keyframe animation, although that will make it into a later update.

If you’ve used an iPhone, iPod Touch or iPad, then you’re familiar with the modal popup dialog boxes that the native system uses. Here’s a typical iPhone popup:
Native iPhone modal popup

Notice the white radial gradient behind the popup. I was able to replicate this, but when the user was on a long document and scrolled down to do something that would trigger a popup, I could find no way to center that radial gradient based on the vertical page scroll. I therefore went with a whitesh blur around the popup itself using a CSS3 box shadow. Here’s what my HTML5/CSS3 version looks like:

Originally I thought I would use just one popup per app, re-assigning values to the popup’s part each time the popup was invoked. However I ran into the problem of events from different and I failed to find an elegant way to resolve this. I therefore came up with a scheme where you initialize a popup at the view level, allowing each view to have a custom popup. The initializing script creates the popup and injects it as the last child of the view. The setup script creates the markup for the popup and populates it with values passed as an argument to the initializing script. The setup script also adds basic functionality to the buttons so that clicking either of them will close the popup. The setup script also creates a screen cover which traps events to prevent user interaction with what is behind the popup until it is closed.

The setup script accepts a single argument—an object literal containing key/values pairs to populate the popup. In order for the setup script to create a popup, you must at least pass a value for a valid view in your Web app. This would be like selector: "#Popup". If no other values are passed, the script will produce a basic popup that looks like this:
Basic popup

I used the ChocolateChip mobile JavaScript library to add the interactive functionality to the popup. Here’s the JavaScript that creates the markup and functionality for the popup:

/** 
* 
* A method to initialize a modal popup. By passing a valid selector for a view, this method creates a view based popup with the properties supplied by the options argument. It automatically binds events to both popup buttons to close the popup when the user clicks either. If a callback is passed as part of the opts argument, it gets bound to the "Continue" button automatically.
*
* @method
* 
* ### setupPopup
*
* syntax:
*
*  $.setupPopup({selector: "#News", title: "Subscribe", cancel: });
*
* arguments:
* 
*  - string: string A valid selector for the parent of the tab control. By default the an object literal.
*  - string: string An object literal which can have the following properties:
	title: a string defining the title in the popup.
	message: a string defining the popup message.
	cancelButton: a string defining an alternate name for the cancel button.
	continueButton: a string defining an alternate name for the confirm button.
	callback: a function to run when the user touches the confirm button.
	If no title is supplied, it defaults to "Alert!".
	If no cancelButton value is supplied, it defaults to "Cancel".
	If no continueButton value is supplied, it defaults to "Continue".
* example:
*
*  $.setupPopup({selector: "#buyerOptions"});
*  $.setupPopup({
		selector: "#Popup",
		title: 'Attention Viewers!', 
		message: 'This is a message from the sponsors. Please be seated while we are getting ready. Thank you for your patience.', 
		cancelButton: 'Skip', 
		continueButton: 'Stay for it', 
		callback: function() {
			$('#popupMessageTarget').fill('Thanks for staying with us a bit longer.');
			$('#popupMessageTarget').removeClass("animatePopupMessage");
			$('#popupMessageTarget').addClass("animatePopupMessage");
		}
	});
*
*/
$.setupPopup = function( opts ) {
	if (opts.selector) {
		var selector = opts.selector;
	} else {
		return false;
	}
	var title = "Alert!";
	if (opts.title) {
		var title = opts.title;
	}
	var message = "";
	if (opts.message) {
		var message = opts.message;
	}
	var cancelButton = "Cancel";
	if (opts.cancelButton) {
		cancelButton = opts.cancelButton;
	}
	var continueButton = "Continue";
	if (opts.continueButton) {
		continueButton = opts.continueButton;
	}
	var popup = '<div class="screenCover hidden"></div>';
	popup += '<section class="popup hidden"><div>';
	popup += '<header><h1>' + title + '</h1></header>';
	popup += '<p>' + message +'</p><footer>';
	popup += '<div class="button cancel">' + cancelButton + '</div>';
	popup += '<div class="button continue">' + continueButton + '</div></footer></div></section>';
	$(selector).insertAdjacentHTML("beforeEnd", popup);
	// Bind event to close popup when either button is clicked.
	$$(selector + " .button").forEach(function(button) {
		button.bind("click", function() {
			$(selector + " .screenCover").addClass("hidden");
			$(selector + " .popup").addClass("hidden");
		});
	});
	
	if (opts.callback) {
		var callbackSelector = selector + " .popup .continue";
		$(callbackSelector).bind("click", function() {
			opts.callback();
		});
	}
	
};

And here is an initialization of a popup:

$.setupPopup(
	{
		selector: "#Popup",
		title: 'Attention Viewers!', 
		message: 'This is a message from the sponsors. Please be seated while we are getting ready. Thank you for your patience.', 
		cancelButton: 'Skip', 
		continueButton: 'Stay for it', 
		callback: function() {
			$('#popupMessageTarget').fill('Thanks for staying with us a bit longer.');
                        // Remove this class in case the popup was opened previously.
			$('#popupMessageTarget').removeClass("animatePopupMessage");
                        // Then add the class to trigger an animation of the message being displayed.
			$('#popupMessageTarget').addClass("animatePopupMessage");
		}
	}
);

Now that a popup has been created and populated with the desired values, we need a way to show it. Before actually showing the popup, the $.showPopup method display a screen cover which captures user interaction and thereby prevents the interface behind the popup from being accessed until the popup is dispelled. The showPopup method accepts one argument, a selector indicating a uniquely identifiable node that contains the popup as a descendant.

$.showPopup = function( selector ) {
	var screenCover = $(selector + " .screenCover");
        // Make the screen cover extend the entire width of the document, even if it extends beyond the viewport.
	screenCover.css("height:" + (window.innerHeight + window.pageYOffset) + "px");
	var popup = $(selector + " .popup");
	$(selector + " .popup").style.top = ((window.innerHeight /2) + window.pageYOffset) - (popup.clientHeight /2) + "px";
	$(selector + " .popup").style.left = (window.innerWidth / 2) - (popup.clientWidth / 2) + "px";
	$(selector + " .screenCover").removeClass("hidden");
	$(selector + " .popup").removeClass("hidden");
};

With this method defined we can now show the popup as need. Here’s a script that attaches an event handler to a button with a class of “openPopup” for a popup somewhere among the descendant nodes of a node with an id of “Tabs”:

$("#Tabs .openPopup").bind("click", function() {
	$.showPopup("#Tabs");
});

OK, so we have the markup and functionality for the popup, but we don’t have the look. We’ll take care of that next. In order to create the unique look of the iPhone popup, I use several layers for encasing borders and composited transparent background gradients. Originally I had two gradients, the dark blue linear gradient and the whitish radial gradient, layered on top of each other as multiple backgrounds. But Google Chrome had a problem rendering the underlying linear gradient, ignoring its transparent alpha values and rending the colors as opaque. I was therefore forced to break them out into separate elements. The end result is the same. When the popup is created by the setup script, it is given a class of “hidden.” This defines its scale as 0% and its opacity as 0%. When we execute the showPopup method, it removes that “hidden” class. Because the popup has basic transitions properties defined on it, its scale and opacity transition from zero to full, making it appear to popup out of no where. The scripts also always make sure that the popup is centered in the viewport, regardless of where it was displayed when scrolling down a long document.

For their modal popups, Apple always indicates the default button, what would be equivalent to a submit or OK button, with slightly lighter colors so that it stands out from the other button, which is the equivalent of a cancel/close button. I have the buttons located in a footer and I use CSS3’s flexible box model styles to make the buttons position and size them selves according to available space.

/* Modal Popup Styles */
section.popup {
	width: 75%;
	max-width: 300px;
	border: solid 1px #72767b;
	-webkit-box-shadow: 0px 4px 6px #666, 0 0 50px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 1px #72767b,  0px 4px 6px #666;
	box-shadow: 0px 0px 1px #72767b, 0px 4px 6px #666;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 0px;
	opacity: 1;
	-webkit-transform: scale(1);
	-webkit-transition: all 0.25s  ease-in-out;
	position: absolute;
	z-index: 1001;
	margin-left: auto;
	margin-right: auto;
	background-image: 
		-webkit-gradient(linear, left top, left bottom,
			from(rgba(0,15,70,0.5)),
			to(rgba(0,0,70,0.5)));
}
section.popup.hidden {
	opacity: 0;
	-webkit-transform: scale(0);
	top: 50%;
	left: 50%;
	margin: 0px auto;
}
section.popup > div {
	border: solid 2px #e6e7ed;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 10px;
	background-image: 
	   -webkit-gradient(radial, 50% -1180, 150, 50% -280, 1400,
		   color-stop(0, rgba(143,150,171, 1)),
		   color-stop(0.48, rgba(143,150,171, 1)),
		   color-stop(0.499, rgba(75,88,120, .9)),
		   color-stop(0.5, rgba(75,88,120,0)));
	color: #fff;
	text-shadow: 0px -1px 1px #000;
}
section.popup header {
	background: none;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: none;
	color: #fff;
	text-shadow: 0px -2px 1px #000;
}
section.popup header > h1 {
	letter-spacing: 1px;
}
section.popup footer
{
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack:justify;
	-webkit-box-sizing: border-box;
	display: -moz-box;
	-moz-box-orient: horizontal;
	-moz-box-pack:justify;
	-moz-box-sizing: border-box;
}
section.popup footer > .button {
	-webkit-box-flex: 2;
	-moz-box-flex: 1;
	display: block;
	text-align: center;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	margin: 10px 5px;
	height: 32px;
	font-size: 18px;
	line-height: 32px;
	-webkit-border-radius: 8px;
}
section.popup footer > .button.cancel {
	background-image: 
		-webkit-gradient(linear, left top, left bottom, 
			from(#828ba3), 
			color-stop(0.5, #4c5a7c), 
			color-stop(0.5, #27375f), 
			to(#2e3d64));
}
section.popup footer > .button.continue {
	background-image: 
		-webkit-gradient(linear, left top, left bottom, 
			from(#b0b6c4), 
			color-stop(0.5, #7a839b), 
			color-stop(0.5, #515d7c), 
			to(#636e8a));
}
section.popup footer > .button:hover, .popup footer > .button.hover {
	background-image: 
		-webkit-gradient(linear, left top, left bottom, 
			from(#70747f), 
			color-stop(0.5, #424857), 
			color-stop(0.5, #171e30), 
			to(#222839));
}
.screenCover {
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	z-index: 1000;
	top: 0px;
	left: 0px;
}
.screenCover.hidden {
	display: none;
}

You can try this out online or download the source code to play around with it.