Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/activity-indicator.css

Last active January 3, 2016 15:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ptb/8484642 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ptb/8484642 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
activity-indicator.css
.loading::after{display:inline-block;content:'';width:20px;height:20px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%238c8c8c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%20transform%3d'rotate(60%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%20transform%3d'rotate(90%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%20transform%3d'rotate(120%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%20transform%3d'rotate(150%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.37'%20transform%3d'rotate(180%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.46'%20transform%3d'rotate(210%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.56'%20transform%3d'rotate(240%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.66'%20transform%3d'rotate(270%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.75'%20transform%3d'rotate(300%2060%2c60)'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.85'%20transform%3d'rotate(330%2060%2c60)'%2f%3e%3c%2fg%3e%3c%2fsvg%3e");background-position:50%;background-size:20px;background-repeat:no-repeat;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:spin 1s step-end infinite;animation:spin 1s step-end infinite;width:100%;height:100px}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}8.33333%{-webkit-transform:rotate(30deg)}16.66667%{-webkit-transform:rotate(60deg)}25%{-webkit-transform:rotate(90deg)}33.33333%{-webkit-transform:rotate(120deg)}41.66667%{-webkit-transform:rotate(150deg)}50%{-webkit-transform:rotate(180deg)}58.33333%{-webkit-transform:rotate(210deg)}66.66667%{-webkit-transform:rotate(240deg)}75%{-webkit-transform:rotate(270deg)}83.33333%{-webkit-transform:rotate(300deg)}91.66667%{-webkit-transform:rotate(330deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}8.33333%{transform:rotate(30deg)}16.66667%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.33333%{transform:rotate(120deg)}41.66667%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.33333%{transform:rotate(210deg)}66.66667%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.33333%{transform:rotate(300deg)}91.66667%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}
Raw
activity-indicator.css.sass
=activity-indicator($size, $dark-bg: false)
$stroke-color: '8c8c8c'
@if $dark-bg
$stroke-color: 'fff'
display: inline-block
content: ''
width: #{$size}
height: #{$size}
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23#{$stroke-color}'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
background-position: 50%
background-size: #{$size}
background-repeat: no-repeat
-webkit-transform-origin: 50%
transform-origin: 50%
-webkit-animation: spin 1s step-end infinite
animation: spin 1s step-end infinite
@-webkit-keyframes spin
@for $i from 0 through 12
#{percentage($i * 1/12)}
-webkit-transform: rotate(#{$i * 30}deg)
@keyframes spin
@for $i from 0 through 12
#{percentage($i * 1/12)}
transform: rotate(#{$i * 30}deg)
// with a light background:
.loading::after
+activity-indicator(20px)
// with a dark background:
.loading::after
+activity-indicator(20px, true)
Raw
back-control.css.sass
=back-control($height)
display: inline-block
content: ''
width: #{$height * 0.75}
height: #{$height}
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2090%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm63.75%2011.25%2010%2010-40%2040%2040%2040-10%2010-50-50z'%2F%3E%3C%2Fsvg%3E")
background-position: 50%
background-size: #{$height * 0.75} #{$height}
background-repeat: no-repeat
=forward-control($height)
display: inline-block
content: ''
width: #{$height * 0.75}
height: #{$height}
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2090%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm16.25%2021.25%2010-10%2050%2050-50%2050-10-10%2040-40z'%2F%3E%3C%2Fsvg%3E")
background-position: 50%
background-size: #{$height * 0.75} #{$height}
background-repeat: no-repeat
.back::before
+back-control(24px)
.forward::after
+forward-control(24px)
Raw
video-control.css.sass
=video-control($size)
display: inline-block
content: ''
width: #{$size}
height: #{$size}
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20140%20140'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'70'%20cy%3D'70'%20r%3D'70'%20fill%3D'%23cacaca'%2F%3E%3Cpath%20d%3D'm48%2034.5v71l61.5-35z'%20fill%3D'%23747474'%2F%3E%3C%2Fsvg%3E")
background-position: 50%
background-size: #{$size}
background-repeat: no-repeat
&:active
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20140%20140'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'70'%20cy%3D'70'%20r%3D'70'%20fill%3D'%236b6b6b'%2F%3E%3Cpath%20d%3D'm48%2034.5v71l61.5-35z'%20fill%3D'%233d3d3d'%2F%3E%3C%2Fsvg%3E")
.video
+video-control(70px)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment