Заполнение по кругу | CSS - «Учебник CSS»

Lea Verou предложила конический градиент [w3.org]. Когда браузеры начнут его поддержку реализацию плавного заполнения вероятно можно будет сделать ещё интересней. Сейчас же нужно немного похимичить. И без overflow: hidden; не обойтись.

	.button25 {

	position: relative;

	display: inline-block;

	width: 50px;

	height: 100px;

	border: solid transparent;

	border-width: 0 0 0 50px;

	border-radius: 100px;

	outline: none;

	overflow: hidden;

	-webkit-animation: background1 10s linear infinite;

	animation: background1 10s linear infinite;

	}

	.button25:before {

	content: "";

	position: absolute;

	left: -50px;

	height: 100px;

	border-right: 50px solid transparent;

	border-left: 50px solid green;

	border-radius: 100px;

	-webkit-animation: rotate1 10s linear infinite;

	animation: rotate1 10s linear infinite;

	}

	@-webkit-keyframes background1 {

	49.999% {border-width: 0 0 0 50px; border-color: transparent;}

	50%, 100% {border-width: 0 50px 0 0; border-color: green;}

	}

	@-webkit-keyframes rotate1 {

	49.999% {left: -50px;}

	50% {left: 0px;}

	100% {-webkit-transform: rotate(360deg); left: 0px;}

	}

	@keyframes background1 {

	49.999% {border-width: 0 0 0 50px; border-color: transparent;}

	50%, 100% {border-width: 0 50px 0 0; border-color: green;}

	}

	@keyframes rotate1 {

	49.999% {left: -50px;}

	50% {left: 0px;}

	100% {transform: rotate(360deg); left: 0px;}

	}

	

	

	
	
 

Или так. Нажмите на зелёный круг.

	.button26 {

	position: relative;

	display: inline-block;

	width: 50px;

	height: 100px;

	border: solid green;

	border-width: 0 0 0 50px;

	border-radius: 100px;

	outline: none;

	overflow: hidden;

	}

	.button26:before {

	content: "";

	position: absolute;

	left: -50px;

	height: 100px;

	border-left: 50px solid transparent;

	border-right: 50px solid green;

	border-radius: 100px;

	}

	.button26:focus {

	-webkit-animation: background 10s linear forwards;

	animation: background 10s linear forwards;

	}

	.button26:focus:before {

	-webkit-animation: rotate 10s linear forwards;

	animation: rotate 10s linear forwards;

	}

	@-webkit-keyframes rotate {

	49.999% {left: -50px;}

	50% {left: 0;}

	100% {-webkit-transform: rotate(360deg); left: 0;}

	}

	@-webkit-keyframes background {

	49.999% {border-width: 0 0 0 50px; border-color: green;}

	50%, 100% {border-width: 0 50px 0 0; border-color: transparent;}

	}

	@keyframes rotate {

	49.999% {left: -50px;}

	50% {left: 0;}

	100% {transform: rotate(360deg); left: 0;}

	}

	@keyframes background {

	49.999% {border-width: 0 0 0 50px; border-color: green;}

	50%, 100% {border-width: 0 50px 0 0; border-color: transparent;}

	}

	

	

	

Я всё же нашла видео выступления Юлии Липницкой в хорошем качестве. Девчушка катается выше всех похвал!