Кръгла лента за напредък в CSS

И какво ще правим?

Вероятно сте срещали такива индикатори за зареждане, особено на Flash сайтове. Това е сектор от кръга, който става все по-голям и по-голям, докато стане пълен кръг.

На пръв поглед задачата изглежда проста: направете кръг, завъртете го и скрийте частта зад маската. Но в действителност всичко се оказва малко по-сложно. CSS не е подготвен за такива задачи, дори когато използва препроцесори като SASS & Компас. Винаги се борим, когато става въпрос за създаване на различни форми и особено когато дефинираме стилове и анимации за тях. По-голямата част от работното време се изразходва за това. за да може нещо да работи, а семантиката на кода и неговата поддръжка се жертват.

Защо го правим?

Най-вероятната употреба на такива елементи са таймери. Но тази концепция може да се използва за създаване на кръгова диаграма само с CSS.

Семантиката на кода ще бъде така-така! Но съпроводът може да бъде доста удобен.

Имаме нужда от 3 различни елемента:

въртящ се: половината от кръга, който ще се върти;
mask: този елемент скрива въртящия се кръг през първите 50% от анимацията;
filler: този елемент запълва кръга през последните 50% от анимацията.

И трите елемента трябва да имат един и същ родител за абсолютно позициониране:

Тъй като центрофугата и пълнителят са две половини на един и същи кръг, ще използваме класа .pie за тях.

За да бъде кодът на урока ясен и разбираем, префиксите на доставчика на браузъра са пропуснати.

Родителският елемент получава размерите и абсолютното позициониране на контекста за таймера:

Важно е ширината и височината да са равни, за да се получи кръг и всичко да работи.

Елементите " spinner " и " filler " използват този CSS код:

Те имат ширина, равна на 50% от родителския елемент, така че те са две части от един и същи кръг, а височината им е равна на височината на родителския елемент. Ние също така определяме същия цвят и граница за тях.

елемент "въртящ се".

Направете го полукръг, като използвате свойството border-radius в горния ляв и долния ляв ъгъл. Ние също така дефинираме положителна стойност за z-индекса, за да го поставим върху елемента за запълване, но под маската.

След това добавяме анимация с продължителност 10 секунди. Ще говорим за анимацията по-късно.

елемент "пълнител".

За този елемент задайте border-radius и z-index, премахнете border-left и направете анимацията да продължава 10 секунди. За даден елемент, animation-timing-function не е зададена на linear, но ще бъде steps(1, end). Това означава, че анимацията ще се изпълни незабавно.

Тъй като елементът за запълване не трябва да се вижда през първата половина на анимацията, неговата непрозрачност ще бъде 0 и позицията му ще бъде 50% от ширината на родителския елемент.

Елементът "маска".

Маската присъства от началото на анимацията, така че нейната непрозрачност е зададена на 1, а фонът е наследен от родителския елемент (така че е невидим). За да покрие въртящия се елемент, той ще има същите размери и свойството z-index е зададено на 300.

Рамки за анимация

Първата анимация ( rota ) се използва за въртящия се елемент. Постепенно се завърта от 0 до 360 градуса за 10 секунди.

Втората анимация ( fill ) се използва за запълващ елемент. Незабавно променя непрозрачността от 0 на 1 след 5 секунди.

Последната анимация ( mask ) се използва за елемента mask. Той веднага се променянепрозрачност от 1 до 0 след 5 секунди.

Анимацията изглежда така:

T0 - въртящ се елемент отляво, маскиран. Пълнежният елемент е скрит.
T1 - въртящият се елемент започва да се върти по посока на часовниковата стрелка и бавно се появява иззад маската.
T2 - въртящият се елемент r, завъртян на 360/10*2 = 72°, продължава да се върти.
T3 - въртящ се елемент, завъртян на 360/10*3 = 108°, продължава да се върти.
T4 - въртящ се елемент, завъртян на 360/10*4 = 144°, продължава да се върти.
T5 - въртящ се елемент, завъртян на 360/10*5 = 180°, продължава да се върти. В този момент запълващият елемент се вижда незабавно и маската е скрита.
T6 - въртящ се елемент, завъртян на 360/10*6 = 216°, продължава да се върти.
T7 - въртящ се елемент, завъртян на 360/10*7 = 252°, продължава да се върти.
T8 - въртящият се елемент, завъртян на 360/10*8 = 288°, продължава да се върти.
T9 - въртящ се елемент, завъртян на 360/10*9 = 324°, продължава да се върти.
T10 - въртящият се елемент се завърта на 360°. Върнахме се на изходната точка. Изпускаме анимацията. Маската се появява и елементът за запълване е скрит.

Няколко допълнителни трика.

Пауза при задържане

С този код можете да спрете цялата анимация, когато задържите курсора на мишката върху родителския елемент.

Препроцесор или CSS променливи

В момента кодът е много труден за поддръжка. Но ако използваме променливи (или в препроцесора, или очаквани вътрешни CSS променливи), нещата могат да станат много по-лесни. Например, можете да добавите променливи, за да контролирате продължителността, вместо да коригирате кода в 3определения за анимация.

Ако искате да подобрите поддържаемостта на кода, без да използвате предварителни процесори, можете да създадете клас с един контрол на продължителността на анимацията и да го добавите към 3 дъщерни елемента. Например така:

недостатъци

Тази техника има редица недостатъци:

Градиентите не се поддържат.
Сенките не се поддържат.
Без адаптивност. Ако размерът на родителския елемент се промени, тогава всичко ще бъде наред, с изключение на радиуса на границата. Ще трябва да се промени ръчно.
Без семантика (4 елемента за една анимация).

Поддръжка на браузър

Тъй като използваме CSS анимации, поддръжката на браузъра е доста лоша:

Internet Explorer 10
Firefox 12+
Chrome
Safari 5+
Опера 12+
iOS Safari 3+
Android 2+

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: css-tricks.com/css-pie-timer/ Превод: Сергей Фастунов Урокът е създаден: 8 август 2012 г. Прегледи: 34015 Правила за препечатване

5 последни урока от категорията "CSS"

Забавни ефекти за букви

Малък ефект с интерактивна анимация на букви.

Изпълнение на забавни съвети

Малка концепция от забавни съвети, които са внедрени в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.

Анимирани букви

Експеримент: анимирани SVG букви, базирани на библиотеката anime.js.

POV слънчеви очила

Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.

Навигация в падащо меню

Експериментален навигационен скрипт за падащо меню.