✔Заполнение по кругу | 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;
Я всё же нашла видео выступления Юлии Липницкой в хорошем качестве. Девчушка катается выше всех похвал!
