fazlurr

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

import com.squareup.picasso.Transformation;

public class CircleTransform implements Transformation {
    private final int BORDER_COLOR = Color.WHITE;

fazlurr

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -264;
	}
}

fazlurr

/**
 * Standardization status
 */

body {
	background: #f9f7f3;
	font-size: 14px;
}

/* Don't copy this rule, it’s just for the demo */

fazlurr

/**
 * Flexible Google-style progress indicator
 */

@keyframes progress {
	50% { border-width: .5em 0; }
	to { border-width: .5em 0 0 0; }
}

@keyframes rotate {

fazlurr

/**
 * Sorta conical gradient
 */

div {
	width: 200px; height: 200px;
	border-radius: 50%;
	background: grey;
	overflow: hidden;
}

fazlurr

/**
 * Refactor of the WPD breadcrumbs bar based on the idea by @wernull
 */

ol.breadcrumbs {
   margin: 0 0 0 -1.1em;
   padding: 0;
   height: 1em;
   text-transform: uppercase;
   float: left;

fazlurr

/**
 * CSS transitions on stroke-dasharray
 */

circle {
	stroke: red;
	stroke-width: 10;
	stroke-dasharray: 10, 20;
	transition: 1s;
}

fazlurr

/**
 * Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
 * Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
 */

body {
	background: #ccc51c;
	min-height: 100%;
}

fazlurr

/**
 * Animation on hover (wrong way)
 */

div {
	width: 9em;
	padding: .6em 1em;
	margin: 2em auto;
	background: yellowgreen;
}

fazlurr

/**
 * Animation on hover (right way)
 */

div {
	width: 9em;
	padding: .6em 1em;
	margin: 2em auto;
	background: yellowgreen;
	animation: spin 1s linear infinite;