SCSS Loading Circle Mixin
How do I make an scss loading circle mixin?
Easily add customized loading circles through a scss mixin. Customizable color, size, and speed.. What is a scss loading circle mixin? How do you make a scss loading circle mixin? This script and codes were developed by Chris Barnes on 11 August 2022, Thursday.
SCSS Loading Circle Mixin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS Loading Circle Mixin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="load"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
SCSS Loading Circle Mixin - Script Codes CSS Codes
@import "compass/css3";
// mixin: animate
//
// Animation mixin for browser compatability
// params
// - $animation: standard css animation
@mixin animate($animation)
{ -webkit-animation:$animation; -moz-animation:$animation; -o-animation:$animation; animation:$animation;
}
// mixin: frames
//
// Keyframes mixin for browser compatability
// params
// - $title: name of animation
// - @content: keyframes are defined normally
// - i.e. 0%:{...} or to:{...}
@mixin frames($title)
{ @-webkit-keyframes #{$title} { @content; } @-moz-keyframes #{$title} { @content; } @-o-keyframes #{$title} { @content; } @keyframes #{$title} { @content; }
}
// mixin: loader
//
// Creates customizable circle 'loading' animation
// params
// - $color: color of loading circle
// - $size: diameter of circle
// - $speed: speed of animation
@mixin loader($color: #fff, $size: 30px, $speed: .5s)
{ border:2px solid $color; height:$size; width:$size; transition:border $speed; @include border-radius($size); @include animate(cycle $speed infinite reverse);
}
// keyframes: cycle
//
// animation keyframes via frames mixin
// changes border color to transparent for
// top, right, bottom, and left individually
@include frames('cycle')
{ 25%: { border-top-color:transparent; } 50%: { border-right-color:transparent; } 75%: { border-bottom-color:transparent; } 100%: { border-left-color:transparent; }
}
/** * Page Styles */
body
{ background-color:#242424;
}
#load
{ // convenience size var $size: 36px; // positioning the loading circle left:50%; margin-left:-($size/2) - 2px; margin-top:-($size/2) - 2px; position:absolute; top:50%; // call the loading circle mixin @include loader(#ff9900, $size, .6s);
}
Developer | Chris Barnes |
Username | csbarnes |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,985 Kb |
Views | 54,648 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Rainbow Drops | 2,365 Kb |
The Last Question | 12,949 Kb |
Rainbow Drops 2 | 2,516 Kb |
A Pen by Chris Barnes | 1,610 Kb |
ASCII Sentence Generator | 2,605 Kb |
3D CSS3 Cube | 4,179 Kb |
CSS3 Selection Highlighting | 1,621 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Perforated foil | 0x04 | 2,617 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Test | Dviate | 2,668 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!