Skip to content

Instantly share code, notes, and snippets.

@nksm

nksm/index.html

Created July 17, 2015 07:00
Show Gist options
  • Save nksm/cf0b3d04bf388bf24dc8 to your computer and use it in GitHub Desktop.
Save nksm/cf0b3d04bf388bf24dc8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nakashima akira created this gist Jul 17, 2015.
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    .spinner.is-small
    - for (var i = 0; i < 4; i++)
    .spinner__item(class='spinner__item--#{i}')

    .spinner.is-large
    - for (var i = 0; i < 6; i++)
    .spinner__item(class='spinner__item--#{i}')
    87 changes: 87 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    @keyframes spin {
    to {
    transform: rotate(1turn);
    }
    }

    .spinner {
    // variables
    $size--small: 20px;
    $size--large: 50px;

    // 角度
    $deg--small: -45;
    $deg--large: -30;

    // セレクタ
    $root: &;
    $root--is-small: ();
    $root--is-large: ();

    // placeholder
    @at-root %bar {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25%;
    border-radius: 5px;
    }

    position: relative;
    margin: 10px;
    transform-origin: 50% 50%;

    &.is-small {
    $root--is-small: &;
    width: $size--small;
    height: $size--small;
    animation: spin 1s infinite steps(8);
    }
    &.is-large {
    $root--is-large: &;
    width: $size--large;
    height: $size--large;
    animation: spin 1s infinite steps(12);
    }
    &__item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    margin: auto;
    @at-root #{$root--is-small} & {
    width: 10%;
    }
    @at-root #{$root--is-large} & {
    width: 7%;
    }
    &::before {
    @extend %bar;
    top: 0;
    z-index: 10;
    display: block;
    }
    &::after {
    @extend %bar;
    bottom: 0;
    z-index: 5;
    background-color: lighten(#000, 80%);
    }
    @for $i from 0 through 6 {
    &--#{$i} {
    @at-root #{$root--is-small} & {
    transform: rotate(#{$deg--small * $i}deg);
    }
    @at-root #{$root--is-large} & {
    transform: rotate(#{$deg--large * $i}deg);
    }
    &::before {
    background-color: lighten(#000, 0% + ($i * 10));
    }
    }
    }
    }
    }
    7 changes: 7 additions & 0 deletions スピナー.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    スピナー
    ----
    CSS でスピナーを作る

    A [Pen](http://codepen.io/nksm/pen/GJBjER) by [nakashima akira](http://codepen.io/nksm) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/nksm/pen/GJBjER/license).