Только HTML и CSS. Border-color и rotate псевдоэлемента
Сразу оговорюсь, что SVG предлагает намного большие возможности, по части форм и анимации (что видно из соседних ответов). Правда, есть пара минусов - это утяжеление кода разметки (при этом, стили и скрипты никто не отменял) и изучение SVG (хотя "порог входа" не высок, но с ходу понять не так просто).
Для простых фигур, достаточно минимальной HTML-разметки, всё остальное же достигается с помощью CSS:
.spin,
.spin:after {
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
box-sizing: border-box;
/* Толщина окружности */
border: 3px solid grey;
border-radius: 50%;
border-color: grey transparent grey transparent;
}
.spin {
position: relative;
margin: 10px 8px;
/* Начальный угол */
transform: rotate(0deg);
transition: 1.5s ease;
}
.spin:after {
content: '';
position: absolute;
z-index: 1;
top: -3px;
left: -3px;
/* Размер зазоров */
transform: rotate(65deg);
}
#spin {
width: 0;
height: 0;
border: none;
position: absolute;
}
#spin:hover+.spin {
transform: rotate(720deg);
}
label {
display: inline-block;
height: 38px;
vertical-align: middle;
border-radius: 10px;
font: 20px/40px "Times New Roman";
text-align: center;
transition: .3s ease;
background: grey;
color: white;
}
label:hover {
background: black;
}
<input id="spin">
<div class="spin"></div><label for="spin"> SPECIAL OPERATIONS </label>
Лоадер
Создание можно разделить на несколько этапов:
- Создаём в HTML-разметке блок
<div class="spin"></div>;
- Создаём в CSS правило
.spin, .spin:after {} и добавляем следующие свойства:
width и height - указываем одинаковые значения для ширины и высоты;box-sizing: border-box; - чтобы толщина рамки не влияла на окружающие элементы;border: 3px solid grey; - собственно, рамка с указанием толщины;border-radius: 50%; - скругляем углы элемента, превращая т.о. в круг;- (Внимание! Магия:) Указываем разным сторонам рамки разный цвет. В данном случае, требуется задать, попарно для параллельных сторон, прозрачность и основной цвет -
border-color: grey transparent grey transparent;.
- Создаём правило
.spin {} со свойствами:
position: relative; - для правильного позиционирования псевдоэлемента;transform: rotate(0deg); - угол поворота в исходном положении блока;transition: 1.5s ease; - задаём переход, чтобы происходила плавная анимация вращения, а не резкий скачок от начального положения к конечному
- Создаём правило
.spin:after {} и свойства:
position: absolute; z-index: 1; top: -3px; left: -3px; - размещаем и выравниваем псевдоэлемент относительно основного блока;- (Внимание! Магия:) С помощью
transform: rotate(65deg); задаём угол поворота псевдоэлемента, тем самым меняя ширину зазоров.
Принцип станет понятнее, если запустить пример ниже и подвигать ползунки:
var oControl=document.querySelector('.control'),oCode=document.querySelector('.code>pre');oControl.addEventListener('input',function(ev){document.documentElement.style.setProperty(`--${ev.target.id}`,ev.target.value);if(ev.target.id=='spin_width'){oCode.innerText=oCode.innerText.replace(/border: \d+px/gi,`border: ${ev.target.value}px`)};if(ev.target.id=='spin_angle'){oCode.innerText=oCode.innerText.replace(/(угол[\s\S]+?rotate\()[-\d]+(deg\))/gi,`$1${ev.target.value}$2`)};if(ev.target.id=='spin-a_angle'){oCode.innerText=oCode.innerText.replace(/(зазоров[\s\S]+?rotate\()[-\d]+(deg\))/gi,`$1${ev.target.value}$2`)}});oControl.addEventListener('mouseover',function(ev){if(ev.target.id=='spin-a_angle'){document.documentElement.style.setProperty(`--spin-a_color`,'rgba(255, 0, 0, 0.5)')};if(ev.target.tagName=='INPUT'){oCode.className=ev.target.id}});oControl.addEventListener('mouseout',function(ev){if(ev.target.id=='spin-a_angle'){document.documentElement.style.setProperty(`--spin-a_color`,'rgba(128, 128, 128, 1)')}})
:root{--spin_color:rgba(128,128,128,1);--spin-a_color:rgba(128,128,128,1);--spin_width:3;--spin_angle:0;--spin-a_angle:65;--code-top:.2em}.wrapper_621x183{position:relative;display:block;width:621px;height:183px;min-width:621px;min-height:183px;max-width:621px;max-height:183px;margin:0 auto;border:0 dashed #ccc}.control{position:absolute;z-index:10;top:10px;right:10px;display:inline-flex;flex-flow:column nowrap;background:rgba(230,230,230,1);box-shadow:2px 10px 20px -7px rgba(0,0,0,.3);padding:5px;border-radius:5px;font:12px/20px 'Arial';text-align:center}.code{position:absolute;z-index:5;bottom:1px;left:10px;width:540px;height:98px;background:rgba(255,255,255,.9);box-shadow:inset 0 3px 23px -4px rgba(0,0,0,.3);padding:8px;border-radius:4px;overflow:hidden}.code>pre{position:absolute;top:var(--code-top);margin:0;font:13px 'Consolas','Courier New',monospace;transition:top 1.5s ease}.code>pre.spin_width{--code-top:.2em}.code>pre.spin_angle{--code-top:-8.5em}.code>pre.spin-a_angle{--code-top:-17.5em}.spin,.spin:after{display:inline-block;width:40px;height:40px;vertical-align:middle;box-sizing:border-box;border:calc(var(--spin_width) * 1px) solid var(--spin_color);border-radius:50%}.spin{position:relative;margin:10px 8px;border-color:var(--spin_color) transparent var(--spin_color) transparent;transform:rotate(calc(var(--spin_angle) * -1deg));transition:1.5s ease}.spin:after{content:'';position:absolute;z-index:1;top:calc(var(--spin_width) * -1px);left:calc(var(--spin_width) * -1px);border-color:var(--spin-a_color) transparent var(--spin-a_color) transparent;transform:rotate(calc(var(--spin-a_angle) * 1deg))}#spin{width:0;height:0;border:none;position:absolute}#spin:hover+.spin{transform:rotate(720deg)}label{display:inline-block;height:38px;vertical-align:middle;border-radius:10px;font:20px/40px 'Times New Roman';text-align:center;transition:.3s ease;background:grey;color:white}label:hover{background:black}
<div class="wrapper_621x183"> <input id="spin"> <div class="spin"></div><label for="spin"> SPECIAL OPERATIONS </label> <div class="control"> <div>Толщина окружности<br><input id="spin_width" min="1" max="20" value="3" type="range"></div><div>Начальный угол<br><input id="spin_angle" min="0" max="360" value="0" type="range"></div><div>Размер зазоров<br><input id="spin-a_angle" min="0" max="90" value="65" type="range"></div></div><div class="code"> <pre>.spin,<br>.spin:after {<br> ···<br> /* Толщина окружности */<br> border: 3px solid grey;<br> ···<br>}<br><br>.spin {<br> ···<br> /* Начальный угол */<br> transform: rotate(-360deg);<br> ···<br>}<br><br><br>.spin:after {<br> ···<br> /* Размер зазоров */<br> transform: rotate(65deg);<br> ···<br>}</pre> </div></div>
Кнопка
Кнопка реализована через тег <label>, путём превращения его в блочный элемент с помощью свойства display: block; с дальнейшей стилизацией.
Использование <label> не случайно и вызвано желанием отказаться от скриптов в конкретном примере, при реализации столь простой задачи. А также, чтобы продемонстрировать один из способов применения данного тега.
Тег <label> (пер. метка), в данном примере, используется для "удалённого" управления состоянием элемента <input>. Т.е. сама метка может располагаться в любом месте страницы (при этом, совсем необязательно рядом с тегом <input> с которым она связана). Связь метки и <input> осуществляется с помощью атрибута for, в значении которого указывается id управляемого элемента:
<input id="spin"> <label for="spin">
Более того, меток указывающих на один и тот же элемент может быть несколько, размещаться они могут в произвольных местах документа и иметь разную стилизацию:
label {
display: block;
margin: 15px auto;
box-sizing: border-box;
text-align: center;
box-shadow: 0 5px 7px -3px black;
transition: .3s ease;
}
label:hover { box-shadow: 0 2px 4px -2px black; }
.first {
width: 130px;
height: 25px;
border: 2px solid #f00;
border-radius: 8px;
}
.second {
width: 130px;
height: 25px;
border: 2px solid #0f0;
border-radius: 0 8px 0 8px;
background-image: linear-gradient(to bottom, lime, gold, lime);
}
#spin {
width: 0;
height: 0;
border: none;
position: absolute;
}
#spin:hover+.spin { transform: rotate(360deg); }
.spin,
.spin:after {
display: block;
width: 70px;
height: 70px;
box-sizing: border-box;
border: 5px solid grey;
border-radius: 50%;
border-color: grey transparent grey transparent;
}
.spin {
position: relative;
margin: 10px auto;
transform: rotate(-360deg);
transition: 1.5s ease;
}
.spin:after {
content: '';
position: absolute;
top: -5px;
left: -5px;
transform: rotate(65deg);
}
<label for="spin" class="first">Наведи на меня!</label>
<input id="spin"><div class="spin"></div>
<label for="spin" class="second">... Или на меня!</label>
Важно! Единственным условием для того, чтобы управляемый элемент своим состоянием мог воздействовать на соседний элемент, <input> должен располагаться в разметке непосредственно перед нужным элементом, а в CSS нужно использовать селектор выбора соседнего элемента - +:
input#spin:hover + div.spin { }
При этом сам <input> нужно скрыть, например, указав в стилях:
input#spin {
width: 0;
height: 0;
border: none;
position: absolute;
}
Почему не display: none;? Потому, что в некоторых браузерах перестают работать связи с метками с элементами скрытыми таким способом.
Варианты
Один сегмент
Изменив всего один параметр - border-color: grey grey grey transparent;, можно получить вращение только одного зазора:
.spin,
.spin:after {
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
box-sizing: border-box;
/* Толщина окружности */
border: 3px solid grey;
border-radius: 50%;
border-color: grey grey grey transparent;
}
.spin {
position: relative;
margin: 10px 8px;
/* Начальный угол */
transform: rotate(0deg);
transition: 1.5s ease;
}
.spin:after {
content: '';
position: absolute;
z-index: 1;
top: -3px;
left: -3px;
/* Размер зазоров */
transform: rotate(65deg);
}
#spin {
width: 0;
height: 0;
border: none;
position: absolute;
}
#spin:hover+.spin {
transform: rotate(720deg);
}
label {
display: inline-block;
height: 38px;
vertical-align: middle;
border-radius: 10px;
font: 20px/40px "Times New Roman";
text-align: center;
transition: .3s ease;
background: grey;
color: white;
}
label:hover {
background: black;
}
<input id="spin">
<div class="spin"></div><label for="spin"> SPECIAL OPERATIONS </label>
Три сегмента
Чтобы получить три зазора, понадобится добавить ещё один псевдоэлемент .spin:before { }, продублировав для него свойства из .spin:after { }. Затем, у основного блока и псевдоэлементов задать свойство transform: rotate( ); с разницей в 120deg. Также, нужно применить нашу "магию" следующим образом - border-color: grey transparent transparent transparent;:
.spin,
.spin:after,
.spin:before {
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
box-sizing: border-box;
/* Толщина окружности */
border: 3px solid grey;
border-radius: 50%;
border-color: grey transparent transparent transparent;
}
.spin {
position: relative;
margin: 10px 8px;
/* Начальный угол */
transform: rotate(0deg);
transition: 1.5s ease;
}
.spin:after {
content: '';
position: absolute;
z-index: 1;
top: -3px;
left: -3px;
/* Размер зазоров */
transform: rotate(120deg);
}
.spin:before {
content: '';
position: absolute;
z-index: 1;
top: -3px;
left: -3px;
/* Размер зазоров */
transform: rotate(240deg);
}
#spin {
width: 0;
height: 0;
border: none;
position: absolute;
}
#spin:hover+.spin {
transform: rotate(720deg);
}
label {
display: inline-block;
height: 38px;
vertical-align: middle;
border-radius: 10px;
font: 20px/40px "Times New Roman";
text-align: center;
transition: .3s ease;
background: grey;
color: white;
}
label:hover {
background: black;
}
<input id="spin">
<div class="spin"></div><label for="spin"> SPECIAL OPERATIONS </label>
Варианты с другим количеством сегментов, резко увеличивают количество кода и усложняют разметку, поэтому реализация HTML+CSS будет нецелесообразной и лучше использовать другой способ.
Анимация появления рамки
Без сомнения, при творческом подходе, возможно создать почти любые эффекты, только средствами CSS. Но, нужно задуматься - "стоит ли овчинка выделки?" Возможно, реализация задумки, где с помощью другой технологии, можно обойтись парой-тройкой строк, не стоит "простыни" кода:
.anistroke {
position: relative;
width: 140px;
height: 40px;
border-bottom: 3px solid transparent;
text-align: center;
font: 18px/40px 'Arial';
box-sizing: border-box;
animation: aniblock 1.5s steps(1, end) forwards;
}
@keyframes aniblock {
50%, 100% { border-bottom: 3px solid grey; }
}
.anistroke::after,
.anistroke::before {
content: '';
position: absolute;
z-index: 1;
bottom: -3px;
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-bottom: 3px solid grey;
}
.anistroke::after {
left: 50%; border-left: 3px solid grey;
animation: aniafter 1.5s linear forwards;
}
.anistroke::before {
right: 50%; border-right: 3px solid grey;
animation: anibefore 1.5s linear forwards;
}
@keyframes aniafter {
50% { left: 0%; height: 0px; width: 70px; }
75% {
height: 37px; width: 0px;
border-top: 0px solid transparent;
border-bottom: 3px solid grey;
}
75.01% { border-top: 3px solid grey; border-bottom: 0px solid transparent; }
100% {
left: 0%; height: 37px; width: 30px;
border-top: 3px solid grey;
border-bottom: 0px solid transparent;
}
}
@keyframes anibefore {
50% { right: 0%; height: 0px; width: 70px; }
75% {
height: 37px; width: 0px;
border-top: 0px solid transparent;
border-bottom: 3px solid grey;
}
75.01% { border-top: 3px solid grey; border-bottom: 0px solid transparent; }
100% {
right: 0%; height: 37px; width: 30px;
border-top: 3px solid grey;
border-bottom: 0px solid transparent;
}
}
<div class="anistroke">anistroke</div>
