
рдпрд╣ рд╡рд┐рдЪрд╛рд░
рдбреИрди рдПрдбреЗрди (
рдбреЗрдореЛ ) рд╕реЗ рд▓рд┐рдпрд╛ рдЧрдпрд╛ рдерд╛, рдореИрдВрдиреЗ рдЕрднреА рд╡рд┐рдзрд┐ рдХреЛ рдереЛрдбрд╝рд╛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд┐рдпрд╛ рд╣реИред
рджрд┐рд▓
рдПрдХ рд╕рд░реНрдХрд▓ рдХреЗ рд░реВрдк рдореЗрдВ рд╣рдо рдПрдХ рдлреНрд░реЗрдо рдХреЗ рд╕рд╛рде рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдмреНрд▓реЙрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВред рдлреНрд░реЗрдо рдореЗрдВ рдХреЛрдИ рднреА рд░рдВрдЧ рдФрд░ рдЪреМрдбрд╝рд╛рдИ рд╣реЛ рд╕рдХрддреА рд╣реИ (рдпрд╣ рдЗрд╕ рддрд░рд╣ рдХреА рд╡рд┐рд╢рд┐рд╖реНрдЯрддрд╛ рд╣реИ рдХрд┐ рдмреНрд▓реЙрдХ рдкреГрд╖реНрдарднреВрдорд┐ рдФрд░ рдЕрдиреНрдп рдЪреАрдЬреЛрдВ рд╕реЗ рдмрд┐рд▓реНрдХреБрд▓ рд╕реНрд╡рддрдВрддреНрд░ рд╣реИ)ред рд╣рдо рдлреНрд░реЗрдо рдХреЛ 100% рддрдХ рдЧреЛрд▓ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕рдХреЗ рдКрдкрд░реА рд╣рд┐рд╕реНрд╕реЗ рдХреЛ рдкрд╛рд░рджрд░реНрд╢реА рдмрдирд╛рддреЗ рд╣реИрдВред рдЗрд╕ рдЕрдВрддрд░ рдореЗрдВ рд╣рдо рдЕрдкрдиреЗ рдкрд╕рдВрджреАрджрд╛ рдЫрджреНрдо рддрддреНрд╡реЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рддреНрд░рд┐рдХреЛрдг (рдПрдХ рд╢реВрдиреНрдп рдмреНрд▓реЙрдХ рдЖрдХрд╛рд░ рдФрд░ рд╕реАрдорд╛ рдХреЗ рд╕рд╛рде рдПрдХ рд╣реИрдХ) рд╕рдореНрдорд┐рд▓рд┐рдд рдХрд░рддреЗ рд╣реИрдВред рдЦреИрд░, рдЕрдВрдд рдореЗрдВ, рд╣рдо рд▓реЛрдбрд┐рдВрдЧ рдкреНрд░рднрд╛рд╡ рдХрд╛ рдЕрдиреБрдХрд░рдг рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмреНрд▓реЙрдХ рдХреЛ рдЪреЗрддрди рдХрд░рддреЗ рд╣реИрдВред
рдЕрдВрдХрди:
<span class="spinner"></span>тАЛ
рд╕реАрдПрд╕рдПрд╕:
.spinner { display: block; width: 35px; height: 35px; margin: 80px 150px; position: relative; border: 2px solid rgba(0,0,0,0.5); border-top-color: transparent; border-radius: 100%; animation: spin 1s infinite linear; } .spinner:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 3px; border: 6px solid transparent; border-bottom-color: rgba(0,0,0,0.5); transform: rotate(45deg); } @keyframes spin { to { transform: rotate(360deg); } }тАЛ
рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рд▓рд┐рдП рдЙрдкрд╕рд░реНрдЧ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдХрд░рдирд╛ рди рднреВрд▓реЗрдВ!
рд╡рд┐рдзрд┐ рд╕рднреА рдЖрдзреБрдирд┐рдХ рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдореЗрдВ рдХрд╛рдо рдХрд░рддреА рд╣реИ (IE <= 9, рдЪрд▓реЛ рдЕрд▓рд╡рд┐рджрд╛!)
Jsfiddle рдбреЗрдореЛ