Comments (7)
In case anybody finds it useful, I am using this spinner, saved in app/assets/images/spinner/gif
:
with this in a .scss file:
.sk-spinner-double-bounce.sk-spinner {
background-image: image_url("spinner.gif");
background-size: contain;
display: inline-block;
width: 15px;
height: 15px;
}
This is makes pretty tiny spinners, as I am just loading numbers into a table asynchronously. Works great. Thanks for a really useful gem @nikolalsvk!
from render_async.
@basicBrogrammer sure thing, bring it on :)
You can use similar PR as an inspiration for it.
from render_async.
@basicBrogrammer you are right, there isn't anything in documentation about it.
Before I add CSS to render_async
, you can try out this solution if it fits you:
If you want to have a working spinner you can add CSS to your application:
/*
* Usage:
*
* <div class="sk-spinner sk-spinner-double-bounce">
* <div class="sk-double-bounce1"></div>
* <div class="sk-double-bounce2"></div>
* </div>
*
*/
.sk-spinner-double-bounce.sk-spinner {
width: 40px;
height: 40px;
position: relative;
margin: 0 auto;
}
.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #8BB634;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-spinner-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes sk-doubleBounce {
0%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-doubleBounce {
0%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
from render_async.
Thanks y'all
from render_async.
Didn't realize you were going to work on adding this... I was about to take the css from https://github.com/tobiasahlin/SpinKit and it worked after modifying it a little. I was doing this as a spike so I've deleted that branch already :/
One reason I abandoned the spike was bc one of my partials was a paginated collection. When i clicked to the next page it replaced my entire body with the async partial. Has anyone worked with this already?
from render_async.
Hey would y'all be interested in a PR to allow any of the spinkit spinners with a local variable passed to the render_async helper?
- add local variable to partial
- add css for each of the spinners
from render_async.
I've made some changes that lets you pass in your own placeholder. 💪
I've removed the old code that has CSS classes sk-spinner sk-spinner-bounce
.
You can checkout how to use your own placeholder in the README
from render_async.
Related Issues (20)
- 2.1.5 breaks manual trigger of click event HOT 13
- preventDefault() in toggle code interferes with other UI functionality HOT 2
- Feature idea: Render async with ActiveJob & ActionCable HOT 2
- Render_async on header HOT 2
- Duplication of injected JS for nested async templates HOT 1
- Start polling immediately option when toggle is specified HOT 1
- Manual retry based on JS event HOT 3
- Idea: only fire the AJAX request on scroll (Lazy Partials) HOT 1
- Event driven reloads. HOT 3
- Polling: vanilla js has code that runs before document has finished loading HOT 2
- Feature request: Refresh with event HOT 5
- Feature: Append or prepend content on toggle HOT 1
- Content flashes on page revisit even with Turbolinks enabled HOT 6
- render_async issues with container_id and turbolinks : not reloading or JS not firing on new visit depending on configuration HOT 5
- Add Support for Turbo HOT 3
- Add delay before performing async call HOT 4
- content_for :render_async does nothing. HOT 1
- With Caching enabled, event_name is not triggered as content_for is missing on page reload HOT 5
- Turbo: Toggable selector not executing the event_listener function set by _setUpToggle on a new visit HOT 1
- JS scripts not loading synchronously HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from render_async.