Category: CSS

  • Preloader CSS

    Animation required:

    @keyframes lds-dual-ring {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    

    Practical example

    button::after {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 0 0 0 8px;
        border-radius: 50%;
        border: 3px solid white;
        border-color: white transparent white transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }
  • SASS syntax

    Basic watch

    sass --watch a.scss:a.css

    Watch and output minified

    sass --watch a.scss:a.css --style compressed

    Remove source map

    sass --no-source-map --watch style.scss:style.css