Andrew Hathaway andrewhathaway

This is a refined version of @AndrewHathaway's and @DannyLePage's javascript site pattern.

Has global methods, site wide methods, and page-specific methods.

How to write a cool CSS3 progress bar

I was set the task to write a progress bar at work recently, and I couldn't really think of a way to do it at first. After a while I came up with this. I'm going to show you how to write one and if you want to see a demo there is one here. We will start with a basic progress bar and extend it as we go on.

The way I did this is pretty simple to be honest. I started off with a div. This acts as your outer 'container' which you set to the width of your choice.

HTML

<div class="meter"></div>

	<?php

	/**
	* I just wanted PHP to be more like JavaScript, a smidge. :(
	*
	* goes back to JS
	*/

	class Awray
	{

	var Gulp = require('gulp');
	var Del = require('del');
	var Rename = require('gulp-rename');
	var RunSequence = require('run-sequence');
	var Yargs = require('yargs');

	var argv = Yargs.argv;

	/**
	* Build Settings

	<?php

	function time_elapsed($date) {
	$date_one = new DateTime($date);
	$date_two = new DateTime(date('jS F Y'));

	$diff = $date_two->diff($date_one);

	$years = plural_delegate($diff->y, 'years');
	$months = plural_delegate($diff->m, 'months');

	//Work out EM for font sizes etc.

	// USAGE: font-size: em(12);
	// USAGE: font-size: em(12, 16);

	@function em($target, $parent: strip-units($body_base_font_size)) {
	@return ($target / $parent) + em;
	}

	//Used for the EM function above - Removes units from a number

	/*
	* Commit And Push - CAP.
	* Cap function to add, commit and push.
	* Drop this in ~/.bash_profile
	* Usage - cap 'commit message'
	* - Andrew Hathaway
	*/

	cap() {
	git add . ; /* Add all changes */

	div {
	height: 100px;
	width: 100px;

	background: rgb(64,150,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(64,150,238,1) 0%, rgba(64,150,238,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,150,238,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%); /* IE10+ */

	body {
	font-family: 'verdana';
	}
	input { display: none; }

	.banner {
	height: 40px;
	background: black
	}