Како направити Реддит-инспирисану спиннер за учитавање са само ХТМЛ-ом и ЦСС-ом

Реддитова мобилна апликација има прилично упечатљив уређај за окретање који подсећа на орбитална тела која круже око планете или звезде. Већина програмера би посегнула за ЈаваСцрипт-ом или СВГ-овима за овакав задатак, али захваљујућиanimation-iteration-count: infinite;и неколико других хакова и трикова, који чак нису ни потребни. Данас ћу вам показати како кодирати спиннер инспирисан Реддитом чисто у ХТМЛ-у и ЦСС-у!

Ево коначног резултата:

Основно подешавање

Почнимо са писањем неких ХТМЛ ДОМ елемената на које можемо закачити средишњи круг и сваку од ротационих орбитала.

 ... ... 

inner-spinИ outer-spinелементи ће бити родитеља чворови свега што треба да се анимирани, и на крају ћемо применити ЦСС кључних кадрова трансформација на овим матичним чворова.

У горњем примеру кода, елипсе ( ) представљају лукове и круже око „месеца“. И унутрашњи и спољашњи прстенови садрже по два лука и два месеца, али из разлога који ће мало касније постати јасни, сваки лук је заправо састављен од два ЦСС облика, па нам је потребно укупно осам лука и четири месеца. ХТМЛ у целости изгледа овако:

ЦСС Облици

Могуће је цртати кругове и лукове у ЦСС-у једноставним стварањем квадрата и подешавањем border-radiusна 50%.

Свака страна обруба може добити другу боју или се може подесити на transparent. background-colorИмовина поставља пуњење облику, уколико их има.

Лако је нацртати лукове од 90, 180 и 270 степени једноставним подешавањем једне или више страница обруба да буду прозирне. Међутим, ако пажљиво погледате окретиште на врху странице, приметићете да „реп“ сваке орбите оставља празнину између себе и месеца иза себе. То значи да, иако су дужине лука близу 180 степени, мало су стидљиве од 180.

За цртање сегмената круга неправилне дужине у ЦСС-у потребан је кратак хак. Да бисмо то урадили, потребно је да нацртамо два суседна сегмента лука од 90 степени и један мало заротирамо тако да се преклапају, остављајући привидни сегмент лука од око 160 степени.

Осврћући се сада на ХТМЛ, могли бисте сада погодити зашто смо поставили два чвора за сваки лук (ан arc_startи arc_end). Они ће се користити за представљање сваког дела једног преклапајућег лука који представља реп сваке орбите.

Постављање ЦСС-а

За почетак ћемо подесити ЦСС променљиву која представља боју предења и другу променљиву која ће представљати превод од -50%, -50% који ћемо користити у целом ЦСС-у за центрирање облика око њиховог центра (као што је постављено њихов горњи леви угао, што је подразумевано).

html { --spinner: #1EAAF0; --center: translate(-50%, -50%); }

Сада можемо да нацртамо и централни круг.

.center { position: absolute; width: 30px; height: 30px; background: var(--spinner); border-radius: 50%; top: 50%; left: 50%; transform: var(--center); }

Подређени чворови за сваку орбиталу затворени су унутар надређених чворова који се називају inner-spinи outer-spin. За сада ћемо их користити само за центрирање центрифуге унутар прозора.

.outer-spin, .inner-spin { position: absolute; top: 50%; left: 50%; }

Цртање орбитала

Уређај за утовар је у основи низ концентричних кругова, па се прво фокусирајмо на цртање само једног лука.

Будући да се сваки лук састоји од два преклапајућа се одељка, почнимо да цртамо само два лука која се налазе један поред другог.

.inner-arc { width: 62px; height: 62px; } .inner-arc_start-a { border-color: transparent transparent transparent green; /* NOTE: the order here very much matters! */ transform: var(--center) rotate(0deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(0deg); }

Прва трансформација центрира у прозору. Ротација је постављена на нула степени како би се приказало подразумевано стање лука.

Приметите да се лукови не поклапају са к-укрштањем на јединичном кругу. Да бисмо то исправили и олакшали рад са луковима, ротирамо лукове за 45 степени. Затим мало преокренемо један од лукова да бисмо створили укупну дужину лука од око 160 степени.

.inner-arc_start-a { border-color: transparent transparent transparent green; transform: var(--center) rotate(65deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(45deg); }

Даље можемо да поставимо један од орбиталних месеца померајући га дуж к оси. Нажалост, за разлику од векторске графике као што су СВГ, ЦСС границе нису вектори без ширине који прихватају стил потеза. То значи да се растојања не мере аутоматски до средишње тачке линије. При позиционирању објеката морамо узети у обзир ширину обруба.

То резултира са неколико „магичних бројева“ које бисмо вероватно могли минимизирати ако желимо да поставимо више ЦСС променљивих и користимо calc()функцију. То изгледа помало умешано, па ћу за сада само позиционирати круг према вредности пиксела.

.inner-moon-a { position: absolute; top:50%; left:50%; width: 12px; height: 12px; background: red; border-radius: 50%; transform: var(--center) translate(33px, 0); }

Даље цртамо још два лука, али овај пут користимо scale(-1, -1)трансформацију. Ово преокреће лукове преко к и и осе, у суштини пресликавајући контуру.

.inner-arc_start-b { border-color: transparent transparent transparent var(--spinner); transform: var(--center) rotate(65deg) scale(-1, -1); } .inner-arc_end-b { border-color: var(--spinner) transparent transparent transparent; transform: var(--center) rotate(45deg) scale(-1, -1);

Коначно, за спољну орбиту, једноставно понављамо ЦСС из унутрашње орбите, али постављамо већу висину и ширину! (Замислите колико би овај ЦСС могао бити кратак са САСС комбинацијама!)

.outer-arc { width: 100px; height: 100px; }

Додавање анимације

Последњи корак је додавање анимације. Прво треба да додамо један кључни кадар оквира који поставља тип понашања анимације и ЦСС елементе који се остварују анимацијом, у овом случају ротацијом кроз transformсвојство.

@keyframes spin { 100% {transform: rotate(360deg); } }

Идентификатор “ spin” повезује кључне оквире натраг са атрибутима анимације које ћемо додати у сваки надређени елемент. Особина анимације поставља временске информације за анимацију, што значи да ће свака орбита орбитирати различитом брзином.

.outer-spin { animation: spin 4s linear infinite; } .inner-spin { animation: spin 3s linear infinite; }

То је то!

Код овог водича можете пронаћи на ЦодеПен.ио. Молимо вас да коментаришете - или ми твитнете @ПлеатхрСтарфисх - ако имате предлог, запажање или кул форк мог кода!